怎么使用纯CSS实现Windows启动界面的动画效果-创新互联
怎么使用纯CSS实现Windows启动界面的动画效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
成都创新互联公司作为成都网站建设公司,专注重庆网站建设公司、网站设计,有关成都定制网页设计方案、改版、费用等问题,行业涉及成都服务器托管等多个领域,已为上千家企业服务,得到了客户的尊重与认可。本篇文章给大家带来的内容是关于如何使用纯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启动界面的动画效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享名称:怎么使用纯CSS实现Windows启动界面的动画效果-创新互联
文章URL:http://pwwzsj.com/article/eeepe.html