前端干货：利用css3编写一个炫酷的波浪效果loading动画

oading动画在页面过度等经常会用到，我在工作中就写过很多有趣的loading加载动画，在这里，我就分享一个波浪效果的loading动画写法（在写动画前，可以先画个草稿或动画流程图，充分思考动画执行的过程，再编写代码事半功倍哦）。

一、首先看下效果图：

css3编写的loading动画

二、html代码很简单，就是一个外层div，加上几个运动的span（动画效果的只有span，外层div仅仅是为了方便span居中）：

<div class="loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

三、css代码我们一步一步分析：

1、让loading居中显示，同时让它变成flex容器，这样span就能设置宽高。

.loading{display: flex; width: 100px; height: 50px; position: absolute; top:50%; left: 50%; transform: translate(-50px,-25px);}

2、分析下这10个span的动画过程：我们把动画从开始到结束分成100份，0%的时候高度几乎没有，位置靠左，高度由小变大，大概15%的时候，突然变很高，颜色很深，并且右移很多，然后依次变矮，变浅，左移，以此类推。通过这个分析，我们写起来就有方向了。

2、根据动画效果和刚才的分析，10个span平分loading的宽度，高度我们就写和loading一样的高度，然后利用scaleY将它缩小，初始深点的背景色，在动画结束时，我们将颜色设置的很浅（颜色过渡建议同色系深浅变化或者相邻色系变化，比较自然好看，不建议颜色过渡特别大）。同时设置translateX也向左平移10像素（数值可以自己调整）。设置animation的动画时间为1.5秒，动画播放次数为无限次，动画效果为先慢后快再慢。重点：10个span的动画是以此执行，这里我们利用css3的var变量（文章末尾我们再来简单了解下这个css3 var以及css3计算calc）来动态编写动画延时：

.loading span {
 width: 10px;
 height: 50px;
 background-color: #308dec;
 transform: scaleY(0.01) translateX(-10px);
 animation: load-ani 1.5s infinite ease-in-out;
 animation-delay: calc(var(--n) * 0.05s);
}

3、分别设置十个span的延时时间（后面分析var的时候再来讨论为什么这么写）

.loading span:nth-child(1) { --n: 1; }
.loading span:nth-child(2) { --n: 2; }
.loading span:nth-child(3) { --n: 3; }
.loading span:nth-child(4) { --n: 4; }
.loading span:nth-child(5) { --n: 5; }
.loading span:nth-child(6) { --n: 6; }
.loading span:nth-child(7) { --n: 7; }
.loading span:nth-child(8) { --n: 8; }
.loading span:nth-child(9) { --n: 9; }
.loading span:nth-child(10) { --n: 10; }

4、最后来写animate动画，有了前面详细的分析，这里就没什么好解释的了，高度从0.01倍过渡到1.2倍再过渡到初始的0.01倍，1.2倍是从15%开始的，所以才有了上面的“突然”的效果。至此loading动画就写完了。

@keyframes load-ani {
 0%, 100% {
 transform: scaleY(0.01) translateX(-10px);
 }
 15% {
 transform: scaleY(1.2) translateX(20px);
 }
 90%, 100% {
 background-color: #aed4fb;
 }
}

我们重点来分析下span动画依次执行的原理，先来说下css3 的 var 变量，先看下面的代码：

div{
	--green: #4CAF50;
	background-color: var(--green);
}

设置div的背景色为#4CAF50。这里的--green就是一个变量，变量名是green，值是“#4CAF50”，“--”是css3规定的变量的前缀，而var()里面放的是变量名，表示使用这个变量的值，当然，还有一些用法，如默认值等，这个关注IT学堂，我们将会在后面的文章中专门介绍css3 var的用法。

calc比var要出名，用过的人一定很多，它能进行css的一些计算，如加减乘除，需要注意的是，操作符左右要有空格，否则不起作用，如：

calc(10px + 10px) //20px
calc(10px+10px) //错误

理解了var和calc，就很简单了：calc(var(--n) * 0.05s) 其实就是拿变量n*0.05s，而n则在第三步对每个span都进行了设置，随着n的不断变大，延时时间也就依次变长。

好了，今天的教程就到这里了，不知道您有收获没。有疑问和建议的，可以在下方留言。关注IT学堂，每天都有干货哦！

现文字波浪动画，我们首先想到的是使用 Javascript 来实现。如今，现代 CSS 属性已逐渐被现代浏览器所支持，本文将探索使用纯 CSS 来实现。

1.效果预览

2.实现方案

实现方案主要使用现代 CSS 提供的样式属性来实现：

一个 HTML 元素 h1
text-stroke 实现文字镂空
background-clip 实现背景裁切
radial-gradient 实现背景渐变
animation 实现波浪动画

2.1.创建页面框架

使用 html:5 和 div[class=wavy-text]{Wavy Text Animation} 快速创建页面框架:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>现代CSS：纯 CSS 实现文字波浪动画</title>
  </head>
  <body>
    <div class="wavy-text">Wavy Text Animation</div>
  </body>
</html>

2.2.实现文字镂空效果

镂空效果实现比较简单，主要通过 color 和 text-stroke 属性来实现

.wavy-text {
  --color: #269af2;
  color: transparent;
  -webkit-text-stroke: 0.2rem var(--color);
}

2.3.实现背景色渐变

背景色渐变，主要使用到了 radial-gradient 和

.wavy-text {
  --color: #269af2;

  --_p: 93% 83.5% at;
  --_g1: radial-gradient(var(--_p) bottom, var(--color) 79.5%, #0000 80%)
    no-repeat;
  --_g2: radial-gradient(var(--_p) top, #0000 79.5%, var(--color) 80%)
    no-repeat;
  /* 背景颜色 */
  background: var(--_g1), var(--_g2), var(--_g1), var(--_g2);
}

2.4.实现背景裁切

背景裁切主要用到了 CSS 属性 background-clip, 实现文本裁切效果。该属性已经被现代浏览器所支持，但是部分浏览器需要使用 -webkit- 前缀来支持。

.wavy-text {
  -webkit-background-clip: text;
          background-clip: text;
}

2.5.实现波浪动画

实现波浪动画，主要是通过背景位置 backgroun-position 和 background-size 的变化来实现，动画中增加了无线循环。

.wavy-text {
  animation: s 2s infinite alternate, m 3s infinite linear;
}
@keyframes m {
  0% {
    background-position: -200% 100%, -100% 100%, 0% 100%, 100% 100%;
  }
  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%, 300% 100%;
  }
}
@keyframes s {
  0% {
    background-size: 50.5% 80%;
  }
  33% {
    background-size: 50.5% 70%;
  }
  66% {
    background-size: 50.5% 85%;
  }
  100% {
    background-size: 50.5% 95%;
  }
}

2.6.实现文本居中

实现文本水平垂直居中，我们仅用了一行 CSS 代码 place-content 来实现，它是 align-content 和 justify-content 的混合属性。

body {
  display: grid;
  place-content: center;
}

3.总结

现代 CSS 相关属性已经被越来越多的浏览器所支持，通过 CSS 来实现的效果也越来越多，欢迎大家和小懒一起关注和学习。

如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！

SS3实战小技巧--使用CSS变量实现波浪动画

2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量，这个重要的 CSS 新功能，所有主要浏览器已经都支持了

声明css变量的时候，变量名前面要加两根连词线（--）。变量名大小写敏感， --ft-size和 --Ft-size 是两个不同变量。变量的值既可以是纯数字，也可以有单位

--ft-size: 30;
--Ft-size: 30px;

var()函数用于读取变量。var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。第二个参数不处理内部的逗号或空格，都视作参数的一部分

font-size: var(--size,30px);

如果变量值是一个字符串，可以与其他字符串拼接

--size: 24px;
font-size: var(--size);

如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接

--size: 30;
font-size: calc(var(--size) * 1px);

变量存在局部变量与全局变量

.txt1 {
    /* 声明一个纯数值的局部变量 */
    --size: 30;
    font-size: calc(var(--size) * 1px);
}
.txt2 {
    /* 声明一个有单位的局部变量 */
    --size: 24px;
    font-size: var(--size);
}

可以使用@supports命令检测浏览器是否兼容css变量

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a',0);
if(isSupported) {
    /* 这里面是支持css变量的操作 */
}else {
    /* 这里面是不支持css变量的操作 */
}

JavaScript操作css变量的写法

//设置变量
document.querySelector('p').style.setProperty('--weight','bold');
//读取变量
document.querySelector('p').style.getPropertyValue('--weight');
//删除变量
document.querySelector('p').style.removeProperty('--weight');

实战代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #1a7156;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        img {
            width: 45px;
            animation: hjAnimate 1s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.1s);
        }
        @keyframes hjAnimate {
            0% {
                transform: translateY(0);
            }
            20% {
                transform: translateY(-50px);
            }
            40%,100% {
                transform: translateY(0);
            }
        }
</style>
</head>
<body>
    <div>
        <img src="huaji.png" style="--i:1">
        <img src="huaji.png" style="--i:2">
        <img src="huaji.png" style="--i:3">
        <img src="huaji.png" style="--i:4">
        <img src="huaji.png" style="--i:5">
        <img src="huaji.png" style="--i:6">
    </div>
</body>
</html>

总结

学以致用，每日累积一点点，每天快乐一点点。

作者：技术大黍
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

在线咨询

上一篇：HTML 颜色
下一篇：应届生4天的时间来制作一个简单的HTML按钮和CSS，应该解雇他吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商