介绍 & lt; div类=皐indows-boot"比;
& lt; div类=發ogo"祝辞
类& lt; p=癿s"祝辞Microsoft
类& lt; p=皐in"祝辞Windows
类& lt; p=皃ro"祝辞Professional
& lt;/div>
& lt; div类=癰ar"祝辞& lt;/div>
& lt;/div> 身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
背景颜色:黑色;
} 。windows启动{
宽度:21.5 em;
高度:15他们;
} 。标志p {
颜色:白色;
字体类型:无衬线;
保证金:0;
填充:0;
} 。标志m {
字体大小:1.6 em;
}
.logo .win {
字体大小:4.2 em;
}
.logo .pro {
字体大小:3他们;
} 。标志m {
粗细:轻;
}
.logo .win {
粗细:大胆的;
}
.logo .pro {
粗细:轻;
} 。标志m {
行高:1 em;
}
.logo .win {
行高:86%;
}
.logo .pro {
行高:1 em;
padding-left: 0.2 em;
} 。{后标志。m::
内容:& # 39;\ 00 a9 # 39;;
字体大小:0.625 em;
vertical-align:最高;
位置:相对;
上图:-0.3 em;
左:0.2 em;
} 。{后标志.win::
内容:& # 39;xp # 39;;
字体大小:0.5 em;
vertical-align:最高;
位置:相对;
上图:-0.4 em;
颜色:番茄;
} 。酒吧{
宽度:15他们;
身高:1 em;
边界:0.2 em固体银;
} 。windows-xp-loader {
显示:flex;
flex-direction:列;
justify-content:之间的空间;
对齐项目:中心;
} 。酒吧{
border - radius: 0.7 em;
位置:相对;
填充:0.2 em;
}
. bar:{之前
内容:& # 39;& # 39;;
位置:绝对的;
宽度:3他们;
高度:70%;
background - color: dodgerblue;
border - radius: 0.2 em;
} 。酒吧:{之前
背景:
线性渐变(
到右,
透明的30%,
黑人占30%,黑人占35%,
的65%,和35%,透明
黑人占65%,黑人占70%,
透明的70%
），
线性渐变(
蓝色的0%,
宝蓝色17%,
deepskyblue 32%, deepskyblue 45%,
宝蓝色60%,
蓝色的100%
);
过滤器:亮度(1.2);
} 。酒吧:{之前
动画:跑2 s线性无限;
}
@keyframes运行{
从{
变换:translateX (3 em);
}
,{
变换:translateX (15 em);
}
} 。酒吧{
溢出:隐藏;
}
怎么使用纯CSS实现窗户启动界面的动画效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中包含2个元素,分别代表标志和进度条,标志又包含3段文字:
居中显示:
定义容器尺寸:
设置段落样式:
设置字号:
设置字体粗细:
设置行高:
在“Microsoft"后面增加商标版权符号:
在“Windows"后面增加“xp":
定义进度条尺寸:
增加标志和进度条的间距:
设置进度条的样式:
用线性渐变设置进度条中蓝色色块的样式:
增加动画效果:
最后,隐藏进度条之外的内容:
感谢各位的阅读!看完上述内容,你们对怎么使用纯CSS实现窗户启动界面的动画效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
