如何使用纯CSS实现Windows启动界面的动画效果
程序员文章站
2022-03-21 13:00:36
...
本篇文章给大家带来的内容是关于如何使用纯CSS实现Windows启动界面的动画效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 2 个元素,分别代表 logo 和进度条,logo 又包含 3 段文字:
<div class="windows-boot"> <div class="logo"> <p class="ms">Microsoft</p> <p class="win">Windows</p> <p class="pro">Professional</p> </div> <div class="bar"></div> </div>
居中显示:
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: '\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.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实现Windows启动界面的动画效果的详细内容,更多请关注其它相关文章!
上一篇: CSS水平垂直居中的几种方法
下一篇: 浅谈php备份与还原MySql的方法
推荐阅读
-
css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati
-
如何使用纯CSS实现一把雨伞开合的动画效果(附源码)
-
如何使用纯CSS 实现一个没有DOM元素的动画效果
-
如何使用纯css实现Material Design中按钮的水滴动画效果
-
如何使用纯CSS实现Windows启动界面的动画效果
-
如何使用纯CSS 实现类似于旗帜飘扬动画效果(附源码)
-
如何使用纯CSS实现小球跳跃台阶的动画效果(附源码)
-
如何使用纯CSS实现一个沙漏的动画效果
-
如何使用纯CSS实现文本的淡入动画效果(附源码)
-
如何使用纯css实现Material Design中按钮的水滴动画效果