Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.