使用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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 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
如何开始收听短波广播
2021/03/01 无线电
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
js保存当前路径(cookies记录)
2010/12/14 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python集合类型用法分析
2015/04/08 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
python实现数据库跨服务器迁移
2018/04/12 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python绘制多个子图的实例
2019/07/07 Python
python/golang 删除链表中的元素
2020/09/14 Python
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
4S店售后客服自我评价
2014/04/09 职场文书
目标管理责任书
2014/04/15 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
借款民事起诉状范文
2015/05/19 职场文书
个人向公司借款协议书
2016/03/19 职场文书