怎么使用纯CSS实现Windows启动界面的动画效果
怎么使用纯CSS实现Windows启动界面的动画效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
创新互联建站从2013年开始,是专业互联网技术服务公司,拥有项目网站制作、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元阳原做网站,已为上家服务,为阳原各地企业和个人服务,联系电话:18982081108
本篇文章给大家带来的内容是关于如何使用纯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: '\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实现Windows启动界面的动画效果
转载来于:http://scyanting.com/article/jcecco.html