使用CSS实现音波加载效果


Posted in HTML / CSS onMay 07, 2023

先看效果(完整代码在底部):

使用CSS实现音波加载效果

这个是比较常见的一个简约效果,拿下~

实现(可一步一步实现):

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.先定义标签(详解):

<div class="container">
        <span style="--i:1;"></span>
        <span style="--i:2;"></span>
        <span style="--i:3;"></span>
        <span style="--i:4;"></span>
        <span style="--i:5;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
        <span style="--i:8;"></span>
        <span style="--i:9;"></span>
        <span style="--i:10;"></span>
    </div>

.container就是底层盒子,span就是每个圈。 "- -i:1;"是css的var函数的运用

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。

3.每个圆圈的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() 函数用于动态计算长度值。

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">
        <span style="--i:1;"></span>
        <span style="--i:2;"></span>
        <span style="--i:3;"></span>
        <span style="--i:4;"></span>
        <span style="--i:5;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
        <span style="--i:8;"></span>
        <span style="--i:9;"></span>
        <span style="--i:10;"></span>
    </div>
</body>
</html>

到此这篇关于使用CSS实现音波加载效果的文章就介绍到这了,更多相关CSS音波加载效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
table不让td文字溢出操作方法
Dec 24 #HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 #HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 #HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 #HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 #HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 #HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 #HTML / CSS
You might like
深入php self与$this的详解
2013/06/08 PHP
php实现网站留言板功能
2015/11/04 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
JAVASCRIPT对象及属性
2007/02/13 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
使用python绘制常用的图表
2016/08/27 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
Servlet如何得到服务器的信息
2015/12/22 面试题
研究生求职推荐信范文
2013/11/30 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
毕业论文致谢词
2015/05/14 职场文书
寻找成龙观后感
2015/06/12 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL