CSS实现渐变式圆点加载动画

2024-04-19 0 1,103

整体效果

CSS实现渐变式圆点加载动画

知识点: animation 时间函数 steps()。

用 css3 模拟一个渐变式圆点加载效果。

核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。

核心代码

html 代码

<div class=\”loading38\”>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
</div>

用8个 span 标签绘制8个圆点。

css 部分代码

.loading38 {
–r-num: 45deg; /*定义角度值*/
width: 40px;
height: 40px;
position: relative;
animation: loading38-eff 1s steps(8) both infinite; /*steps函数*/
}
.load-span38{
width: 6px;
height: 6px;
display: block;
border-radius: 3px;
position: absolute;
left: 17px;
top: 0;
transform-origin: 3px 20px; /*定义变形中心点*/
}
.load-span38:nth-of-type(1){
transform: rotate(var(–r-num));
background: #2FACFD;
}
.load-span38:nth-of-type(2){
transform: rotate(calc(var(–r-num)*2));
background: #33B4FD;
}
.load-span38:nth-of-type(3){
transform: rotate(calc(var(–r-num)*3));
background: #38BEFE;
}
.load-span38:nth-of-type(4){
transform: rotate(calc(var(–r-num)*4));
background: #3ECAFE;
}
.load-span38:nth-of-type(5){
transform: rotate(calc(var(–r-num)*5));
background: #45D7FE;
}
.load-span38:nth-of-type(6){
transform: rotate(calc(var(–r-num)*6));
background: #4BE4FE;
}
.load-span38:nth-of-type(7){
transform: rotate(calc(var(–r-num)*7));
background: #52F1FF;
}
.load-span38:nth-of-type(8){
transform: rotate(calc(var(–r-num)*8));
background: #57FBFF;
}
@keyframes loading38-eff{
to {
transform: rotate(0deg);
}
from {
transform: rotate(-360deg);
}
}

1、8个 span 绘制8个圆点,分别写上不同的背景色

2、通过 transform-origin 属性来定义变形的中心点,然后给每个圆点计算角度变形(这里我定义的角度值为 (360°/8 = 45°)),注意这里的每次变形是基于上一个圆点的角度 +45deg

3、最后给整体加上 animation 动画,并设置时间函数 steps() 为8,意思是分8次整体旋转完成 360deg

完整代码如下

html 页面

<!DOCTYPE html>
<html lang=\”zh\”>
<head>
<meta charset=\”utf-8\”>
<link rel=\”stylesheet\” href=\”style.css\”>
<title>渐变加载条</title>
</head>
<body>
<div class=\”app\”>
<div class=\”loading38\”>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
<span class=\”load-span38\”></span>
</div>
</div>
</body>
</html>

css 样式

/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.loading38 {
–r-num: 45deg; /*定义角度值*/
width: 40px;
height: 40px;
position: relative;
animation: loading38-eff 1s steps(8) both infinite;
}
.load-span38{
width: 6px;
height: 6px;
display: block;
border-radius: 3px;
position: absolute;
left: 17px;
top: 0;
transform-origin: 3px 20px;
}
.load-span38:nth-of-type(1){
transform: rotate(var(–r-num));
background: #2FACFD;
}
.load-span38:nth-of-type(2){
transform: rotate(calc(var(–r-num)*2));
background: #33B4FD;
}
.load-span38:nth-of-type(3){
transform: rotate(calc(var(–r-num)*3));
background: #38BEFE;
}
.load-span38:nth-of-type(4){
transform: rotate(calc(var(–r-num)*4));
background: #3ECAFE;
}
.load-span38:nth-of-type(5){
transform: rotate(calc(var(–r-num)*5));
background: #45D7FE;
}
.load-span38:nth-of-type(6){
transform: rotate(calc(var(–r-num)*6));
background: #4BE4FE;
}
.load-span38:nth-of-type(7){
transform: rotate(calc(var(–r-num)*7));
background: #52F1FF;
}
.load-span38:nth-of-type(8){
transform: rotate(calc(var(–r-num)*8));
background: #57FBFF;
}
@keyframes loading38-eff{
to {
transform: rotate(0deg);
}
from {
transform: rotate(-360deg);
}
}

页面渲染效果

CSS实现渐变式圆点加载动画

到此这篇关于CSS实现渐变式圆点加载动画的文章就介绍到这了,更多相关CSS加载动画内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持悠久资源网

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 CSS CSS实现渐变式圆点加载动画 https://www.u-9.cn/sheji/css/187778.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务