本篇文章给大家带来的内容是关于如何使用纯css实现windows启动界面的动画效果 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含 2 个元素，分别代表 logo 和进度条，logo 又包含 3 段文字：
Microsoft
Windows
Professional
居中显示：
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black;}
定义容器尺寸：
立即学习“前端免费学习笔记（深入）”；
.windows-boot { width: 21.5em; height: 15em;}
设置段落样式：
.logo p { 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: ' 0a9'; 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.2em solid silver;}
增加 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( to right, transparent 30%, black 30%, black 35%, transparent 35%, transparent 65%, black 65%, black 70%, transparent 70% ), linear-gradient( blue 0%, royalblue 17%, deepskyblue 32%, deepskyblue 45%, royalblue 60%, blue 100% ); filter: brightness(1.2);}
增加动画效果：
.bar::before { animation: run 2s linear infinite;}@keyframes run { from { transform: translateX(-3em); } to { transform: translateX(15em); }}
最后，隐藏进度条之外的内容：
.bar { overflow: hidden;}
大功告成！
相关推荐：
如何使用纯CSS实现单元素麦当劳的Logo（附源码）
如何使用纯CSS实现小球跳跃台阶的动画效果（附源码）
以上就是如何使用纯CSS实现Windows启动界面的动画效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611382.html
微信扫一扫 
支付宝扫一扫 
