音波加载效果 html+css

柔光的暖阳◎ 2022-11-19 01:18 176阅读 0赞

## 先看效果╰(●◡●)╮（完整代码在底部）： ##

![在这里插入图片描述][20210413232514804.gif_pic_center]  
这个是比较常见的一个简约效果，拿下~

## 实现（可一步一步实现）： ##

###### 0.基本css样式（复制即可）\* ： ######

*{ 
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{ 
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(4, 6, 17);
            }

###### 1.先定义标签（详解）： ######

.container就是底层盒子，span就是每个圈。  
"- -i:1;"是css的var函数的运用，[点这看用法~][Link 1]

###### 2.底层盒子基本样式： ######

.container{ 
                position: relative;
                width: 20px;
                height: 20px;
                transform-style: preserve-3d;
                transform: perspective(500px) rotateX(50deg) translateZ(50px);
            }

position：relative 相对定位。  
transform-style：preserve-3d 子元素获得3D位置。  
perspective：元素距离视图的距离，以像素计。  
rotateX(50deg) 绕X轴旋转50度。  
translateZ(50px); 往Z轴偏移50px。

###### 2.每个圆圈的css样式，设置动画： ######

.container span{ 
                position: absolute;
                top: calc(-9px * var(--i));
                left: calc(-9px * var(--i));
                bottom: calc(-9px * var(--i));
                right: calc(-9px * var(--i));
                border: 5px solid rgba(0, 162, 255,0.8);
                box-shadow: 0 6px 0 rgb(0, 162, 255),
                inset 0 6px 0 rgba(0, 162, 255,.9);
                /* background-color: rgba(0, 162, 255,0); */
                border-radius: 50%;
                animation: move 1.5s ease-in-out infinite alternate;
                animation-delay: calc(var(--i) * 0.1s);
            }
            @keyframes move{ 
                0%,100%{ 
                    transform: translateZ(0px);
                }
                50%{ 
                   transform: translateZ(-100px);
                }
            }

position: absolute; 绝对定位。  
[calc() 函数用于动态计算长度值。][calc_]  
top: calc(-9px \* var(- -i));  
left: calc(-9px \* var(- -i));  
bottom: calc(-9px \* var(- -i));  
right: calc(-9px \* var(- -i)); 通过calc（）计算每个圈的大小。  
border: 5px solid rgba(0, 162, 255,0.8); 蓝色边框。  
box-shadow: 0 6px 0 rgb(0, 162, 255),  
inset 0 6px 0 rgba(0, 162, 255,.9); 阴影。一个外阴影，一个内阴影。目的是为了让圆圈有点立体效果。  
border-radius: 50%; 角弧度。  
animation: move 1.5s ease-in-out infinite alternate; 定义动画。  
animation-delay: calc(var(–i) \* 0.1s); 通过calc（）计算每个圈延迟多久后执行动画。  
transform: translateZ(0px); Z轴方向的偏移。

## 完整代码♪（＾∀＾●）ﾉ： ##

<!DOCTYPE html>
 <html lang="zh-CN">
 <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; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(4, 6, 17); } .container{ position: relative; width: 20px; height: 20px; transform-style: preserve-3d; transform: perspective(500px) rotateX(50deg) translateZ(50px); } .container span{ position: absolute; top: calc(-9px * var(--i)); left: calc(-9px * var(--i)); bottom: calc(-9px * var(--i)); right: calc(-9px * var(--i)); border: 5px solid rgba(0, 162, 255,0.8); box-shadow: 0 6px 0 rgb(0, 162, 255), inset 0 6px 0 rgba(0, 162, 255,.9); /* background-color: rgba(0, 162, 255,0); */ border-radius: 50%; animation: move 1.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 0.1s); } @keyframes move{ 0%,100%{ transform: translateZ(0px); } 50%{ transform: translateZ(-100px); } } </style>
 </head>
 <body>
 <div class="container">
 
 
 
 
 
 
 
 
 
 
 </div>
 </body>
 </html>

## 总结： ##

MEGALOBOX 第二季上映了，三年呀，，，仿佛就在昨天。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

**其它文章：**  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 1]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 2]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 3]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等

[20210413232514804.gif_pic_center]: /images/20221022/742070724b954123bbe545c66dbadad9.png
[Link 1]: https://www.runoob.com/cssref/func-var.html
[calc_]: https://www.runoob.com/cssref/func-calc.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/de2ab79febef43978ab55a35512606a7.png
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630