旋转水滴加载效果
【摘要】 旋转水滴加载效果利用了css的var()函数实现的旋转水滴效果 实现效果 实现思路将多个小圆圈定位在一起，再添加动画给每个小圆圈添加一定的动画延时，产生这样一个圆圈一个圆圈出来的效果 实现要点在添加动画延时的时候，很多时候都是之间给每个元素添加延时，这样的代码就会冗余，这样当要操作的元素数量过多时，是不太好操作的，css3新增了函数的方法，可以利用var函数来获取属性值因此我们可以这样来操...
旋转水滴加载效果
利用了
css的var()函数实现的旋转水滴效果
实现效果
实现思路
- 将多个小圆圈定位在一起，再添加动画
- 给每个小圆圈添加一定的动画延时，产生这样一个圆圈一个圆圈出来的效果
实现要点
在添加动画延时的时候，很多时候都是之间给每个元素添加延时，这样的代码就会冗余，这样当要操作的元素数量过多时，是不太好操作的，css3新增了函数的方法，可以利用var函数来获取属性值
因此我们可以这样来操作
<span style ="--ljc:1;"></span>
<span style ="--ljc:2;"></span>
<span style ="--ljc:3;"></span>
<span style ="--ljc:4;"></span>
<span style ="--ljc:5;"></span>
<span style ="--ljc:6;"></span>
<span style ="--ljc:7;"></span>
<span style ="--ljc:8;"></span>
<span style ="--ljc:9;"></span>
<span style ="--ljc:10;"></span>
给每个小圆圈添加一个属性，根据var的语法规定，只能获取--开头的属性，因此加上--，属性值我给它们排序，这样我能规定好每个小圆圈延时多久
在CSS代码中我们需要给span盒子添加属性
animation-delay: calc(0.2s * var(--ljc));
calc表明括号内是函数，通过var(--ljc)来获取属性下的值，也就是123456789这些，这样每个span延时的时间就实现了
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
height: 200px;
margin: 200px auto;
background-color: black;
}
.loading {
position: relative;
width: 200px;
height: 200px;
}
.loading span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: rotate 4s ease-in-out infinite;
animation-delay: calc(0.2s * var(--ljc));
}
.loading span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(rgb(39,122,218),skyblue);
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
45%,100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading">
<span style ="--ljc:1;"></span>
<span style ="--ljc:2;"></span>
<span style ="--ljc:3;"></span>
<span style ="--ljc:4;"></span>
<span style ="--ljc:5;"></span>
<span style ="--ljc:6;"></span>
<span style ="--ljc:7;"></span>
<span style ="--ljc:8;"></span>
<span style ="--ljc:9;"></span>
<span style ="--ljc:10;"></span>
</div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）