189 8069 5689
这篇文章主要介绍了怎么用纯CSS实现Windows启动界面的动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业玛曲免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
代码解读
定义dom，容器中包含2个元素，分别代表logo和进度条，logo又包含3段文字：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定义容器尺寸：
.windows-boot{
width:21.5em;
height:15em;
}
设置段落样式：
.logop{
color:white;
font-family:sans-serif;
margin:0;
padding:0;
}
设置字号：
.logo.ms{
font-size:1.6em;
}
.logo.win{
font-size:4.2em;
}
.logo.pro{
font-size:3em;
}
设置字体粗细：
.logo.ms{
font-weight:lighter;
}
.logo.win{
font-weight:bold;
}
.logo.pro{
font-weight:lighter;
}
设置行高：
.logo.ms{
line-height:1em;
}
.logo.win{
line-height:86%;
}
.logo.pro{
line-height:1em;
padding-left:0.2em;
}
在"Microsoft"后面增加商标版权符号：
.logo.ms::after{
content:'\00a9';
font-size:0.625em;
vertical-align:top;
position:relative;
top:-0.3em;
left:0.2em;
}
在"Windows"后面增加"xp"：
.logo.win::after{
content:'XP';
font-size:0.5em;
vertical-align:top;
position:relative;
top:-0.4em;
color:tomato;
}
定义进度条尺寸：
.bar{
width:15em;
height:1em;
border:0.2emsolidsilver;
}
增加logo和进度条的间距：
.windows-xp-loader{
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
设置进度条的样式：
.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;
}
用线性渐变设置进度条中蓝色色块的样式：
.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);
}
增加动画效果：
.bar::before{
animation:run2slinearinfinite;
}
@keyframesrun{
from{
transform:translateX(-3em);
}
to{
transform:translateX(15em);
}
}
最后，隐藏进度条之外的内容：
.bar{
overflow:hidden;
}
感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用纯CSS实现Windows启动界面的动画效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!