CSS实现渐变式圆点加载动画_F11 - 专业站长和开发者的学习网站

分享到

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

css 来源：互联网作者：佚名发布时间：2024-03-25 21:58:18 人浏览

摘要

知识点： animation 时间函数 steps()。用 css3 模拟一个渐变式圆点加载效果。核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。核心代码 html 代码 1 2 3 4 5 6 7 8 9

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

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

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

核心代码

html 代码

</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>

<head>

<title>渐变加载条</title>

</head>

<body>

</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);

}

页面渲染效果

您可能感兴趣的文章 :

原文链接 :

Tag : css(313)

CSS设置水平垂直居中的7种方法总结

1. 水平居中 - 文本或行内元素使用 text-align 属性 1 2 3 .parent { text-align: center; /* 子元素如果是内联或内联块元素，将会水平居中 */ } 1 2 3 4
CSS设置背景模糊周边有白色光晕(解决方案)

css设置背景模糊周边有白色光晕，如何解决？ 1 2 3 4 div class=img-box img :src=xxx.png div class=img-bg :style={background-image: `url(`+ xxx.png+ `)`}/div /div 1 2
CSS实现渐变式圆点加载动画

知识点： animation 时间函数 steps()。用 css3 模拟一个渐变式圆点加载效果。核心代码部分，简要说明了写法思路；完整代码在最后，可直接
html table+css实现可编辑表格的代码

要实现可编辑的 HTML 表格，你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
CSS实现三栏布局的四种方法介绍

1. 什么是三栏布局常见的一种页面布局方式，将页面分为左栏、中栏和右栏左右两侧的盒子宽度固定，中间的盒子会随屏幕自适应一般中
CSS中隐藏元素的常见5种方法总结

在CSS中隐藏元素有多种方法，下面列出几种常见方法及其适用场景与区别： 1. display: none 1 2 3 .element-to-hide { display: none; } 适用场景：完全隐
CSS设置style属性的3种方法介绍

可以将css样式编写到元素的style属性当中： 1.将样式直接写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容起
使用CSS实现简单的翻页效果的代码

我们先来看一下翻页的过程动图，如下：观察动图，大致将此翻页过程分为三个状态，书页未翻开、书页翻动中、书页翻动完成，对应的是
使用CSS实现有趣的汉堡菜单按钮的代码

使用transition过渡属性和transform变形属性，让汉堡图标和关闭图标之间进行过渡、变形，形成视觉效果。适用于h5页面或者app页面中，隐藏菜
CSS实现菜单箭头动画效果

其实是很简单的一个效果思路：箭头图标相对li标签绝对定位，定位到列表之外+列表元素overflow：hidden +悬停动画 html 1 2 3 li class=listyle1 im