介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt;才能head>
,,,& lt; meta charset=皍tf-8"比;
,,,& lt; title>展示一个css动态条形加载条& lt;/title>
,,,& lt; style>
,,,,,/*,使用CSS变量,*/,,,,,.flex {
,,,,,,,显示:,flex;
,,,,,,,list-style:,没有;
,,,,,,,/*,设定李元素横向排列,*/,,,,,}
,
,,,,,.loading {
,,,,,,,宽度:,200 px;
,,,,,,,身高:,200 px;
,,,,,}
,
,,,,,.loading> li {
,,,,,,,/*,我们在每一个李元素的行内元素都定义了一个css变量,——线段索引大小不同,*/,,,,,,,/*,此时定一个动画延迟的变量——time 经过计算calc */,,,,,,,,时间:,calc ((var(——线段索引),安康;1),*,200 ms);
,,,,,,,这个特性:,3 px;
,,,,,,,宽度:,6 px;
,,,,,,,身高:,30 px;
,,,,,,,背景颜色:,# f66;
,,,,,,,/*,动画都是一个动画,但是开始的时间不同,就显示出这样的效果了,*/,,,,,,,动画:,beat 1.5 s ease-in-out var(——),无限;
,
,,,,,}
,
,,,,,.loading>李+ li {
,,,,,,,margin-left:, 5 px;
,,,,,}
,
,,,,,@keyframes beat {
,
,,,,,,,0%,
,,,,,,,100%,{
,,,,,,,,,变换:,写入scaleY (1);
,,,,,,,}
,
,,,,,,,50%,{
,,,,,,,,,变换:,写入scaleY (5);
,,,,,,,}
,,,,,}
,,,& lt;/style>
& lt;才能/head>
& lt;才能body>
,,,& lt; ul 类=發oading flex"比;
,,,,,& lt; li 风格=啊叨嗡饕?,1;“祝辞& lt;/li>
,,,,,& lt; li 风格=啊叨嗡饕?,2;“祝辞& lt;/li>
,,,,,& lt; li 风格=啊叨嗡饕?,3;“祝辞& lt;/li>
,,,,,& lt; li 风格=啊叨嗡饕?,4,“祝辞& lt;/li>
,,,,,& lt; li 风格=啊叨嗡饕?,5;“祝辞& lt;/li>
,,,,,& lt; li 风格=啊叨嗡饕?,6;“祝辞& lt;/li>
,,,& lt;/ul>
& lt;才能/body>
& lt;/html> css的基本语法是什么
这篇文章将为大家详细讲解有关纯css实现动态条形加载条效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
运用了css变量的知识,直接上代码及其我加的注释
看效果
非常漂亮和顺畅
css的基本语法是:1,css规则由选择器和一条或多条声明两个部分构成;2,选择器通常是需要改变样式的HTML元素;3,每条声明由一个属性和一个值组成;4,属性和属性值被冒号分隔开。
关于“纯css实现动态条形加载条效果的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
