使用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教程(6):创建网站多列
Apr 02 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
html form表单基础入门案例讲解
Jul 15 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
document.compatMode介绍
2009/05/21 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
ES6中异步对象Promise用法详解
2019/07/31 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python异常学习笔记
2015/02/03 Python
python模块之time模块(实例讲解)
2017/09/13 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
热爱祖国的演讲稿
2014/05/04 职场文书
2014国庆节标语口号
2014/09/19 职场文书
基层工作经验证明样本
2014/11/16 职场文书
标枪加油稿
2015/07/22 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Pandas搭配lambda组合使用详解
2022/01/22 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers