How to realize the animation effect of Windows startup interface with pure CSS
This article mainly introduces how to use pure CSS to achieve the animation effect of the Windows startup interface, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
Code interpretation
Define dom. The container contains 2 elements, representing logo and progress bar, and logo contains 3 paragraphs of text:
Microsoft
Windows
Professional
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background-color:black
}
Define the container size:
. windows-boot {
Width:21.5em
Height:15em
}
Style the paragraph:
.logop {
Color:white
Font-family:sans-serif
Margin:0
Padding:0
}
Set the font size:
.logo.ms {
Font-size:1.6em
}
.logo.win {
Font-size:4.2em
}
.logo.pro {
Font-size:3em
}
Set the font weight:
.logo.ms {
Font-weight:lighter
}
.logo.win {
Font-weight:bold
}
.logo.pro {
Font-weight:lighter
}
Set the row height:
.logo.ms {
Line-height:1em
}
.logo.win {
Line-height:86%
}
.logo.pro {
Line-height:1em
Padding-left:0.2em
}
Add a trademark copyright symbol after "Microsoft":
.logo.ms:: after {
Content:'\ 00a9'
Font-size:0.625em
Vertical-align:top
Position:relative
Top:-0.3em
Left:0.2em
}
Add "xp" after "Windows":
.logo.win:: after {
Content:'XP'
Font-size:0.5em
Vertical-align:top
Position:relative
Top:-0.4em
Color:tomato
}
Define the progress bar size:
.bar {
Width:15em
Height:1em
Border:0.2emsolidsilver
}
Increase the spacing between the logo and the progress bar:
.windows-xp-loader {
Display:flex
Flex-direction:column
Justify-content:space-between
Align-items:center
}
Style the progress bar:
.bar {
Border-radius:0.7em
Position:relative
Padding:0.2em
}
.bar:: before {
Content:''
Position:absolute
Width:3em
Height:70%
Background-color:dodgerblue
Border-radius:0.2em
}
Style the blue blocks in the progress bar with a linear gradient:
.bar:: before {
Background:
Linear-gradient (
Toright
Transparent30%
Black30%,black35%
Transparent35%,transparent65%
Black65%,black70%
Transparent70%
),
Linear-gradient (
Blue0%
Royalblue17%
Deepskyblue32%,deepskyblue45%
Royalblue60%
Blue100%
)
Filter:brightness (1.2)
}
Add animation effects:
.bar:: before {
Animation:run2slinearinfinite
}
@ keyframesrun {
From {
Transform:translateX (- 3em)
}
To {
Transform:translateX (15em)
}
}
Finally, hide what is outside the progress bar:
.bar {
Overflow:hidden
}
Thank you for reading this article carefully. I hope the article "how to use pure CSS to achieve the animation effect of Windows startup interface" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
