css.怎麽启动,如何使用纯CSS实现Windows启动界面的动画效果

忘是亡心i 2022-09-02 14:53 61阅读 0赞

本篇文章给大家带来的内容是关于如何使用纯CSS实现Windows启动界面的动画效果 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

![0b47a9db2b7e56014f0b70adc1ca01a2.gif][]

源代码下载

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.怎麽启动,如何使用纯CSS实现Windows启动界面的动画效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关纯css实现循环动画

相关使用css动画实现loding效果

相关 157.纯CSS波浪段动画效果

相关纯css3 checkbox选中动画效果

相关 css.怎麽启动,如何使用纯CSS实现Windows启动界面的动画效果

相关纯css实现粒子效果

相关纯css实现回旋动画

相关纯CSS实现SVG路径描边动画效果

相关纯 css 实现三角效果

相关用纯CSS实现加载中动画效果