携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 36 天，点击查看活动详情
在上一节中，我们通过 CSS3 中的 animation 和 transform 属性制作了两个 3D 效果，分别是 3D水波浪球体动画效果 和 3D立体阴阳无极八卦阵，相信经过这几节 CSS 动画的相关的文章，大家对于 CSS 能实现哪些有趣的效果心里应该有数了，那么今天我们继续来实现两个有趣又实用的效果，让我们开始吧！
炫酷光影加载效果
在前面一节中，我们实现了一个页面 loading 的效果 -- 3D水波浪球体动画效果，这次我们继续来实现一个更酷炫的页面 loading 效果 -- 炫酷光影加载效果，我们还是先来看一下最终实现的效果，如图：
这个效果比起前面一节的 3D水波浪球体动画效果 看起来会更加的酷炫一些，当然它的实现相对来说也复杂一点。首先我们还是先来实现一下相关的 html 代码，如下：
<!DOCTYPE html>
<html lang="en">
<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>CSS3 - 炫酷光影加载效果</title>
</head>
<body>
<h1>
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</h1>
</body>
</html>
页面中的 html 元素主要包含我们要在页面中展示的 loading 文字，当然使用中文也是可以的，html 不是重点，重点是 css ，让我们一起来看一下 css 的实现，代码如下：
*{ margin: 0;padding: 0;list-style: none;font-style: normal;}
html, body {width: 100%; height: 100%;}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: consolas;
background-color: #000;
h1 {
color: #000;
font-size: 8em;
display: flex;
span {
animation: animate 1s linear infinite;
&:nth-child(1) {
animation-delay: 0;
}
&:nth-child(2) {
animation-delay: 0.1s;
}
&:nth-child(3) {
animation-delay: 0.2s;
}
&:nth-child(4) {
animation-delay: 0.3s;
}
&:nth-child(5) {
animation-delay: 0.4s;
}
&:nth-child(6) {
animation-delay: 0.5s;
}
&:nth-child(7) {
animation-delay: 0.6s;
}
&:nth-child(8) {
animation-delay: 0.7s;
}
&:nth-child(9) {
animation-delay: 0.8s;
}
&:nth-child(10) {
animation-delay: 0.9s;
}
}
}
}
@keyframes animate {
0%, 100% {
color: #fff;
filter: blur(3px);
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 240px #00b3ff,
0 0 320px #00b3ff,
0 0 480px #00b3ff,
0 0 600px #00b3ff,
0 0 720px #00b3ff;
}
25%, 75% {
color: #000;
filter: blur(0);
text-shadow: none;
}
}
这个效果主要运用了 CSS3 中的 animation，通过给每个 SPAN 元素单独设置延迟执行时间，不断改变元素的模糊度，从而实现了一个光影加载的效果，注意外层需要通过黑色覆盖起来，内层的白色不断变换即可。最终的代码实现跨越在这里进行查看
扁平预加载动画
在上面我们通过 CSS3 中的 animation 配合延时和遮罩完成了一个炫酷的 光影加载效果，接下来我们继续来实现一个页面中的 loading 效果 -- 扁平预加载动画 效果。我们还是先来看最终的实现效果图，如下：
这个效果比起上面的炫影效果看起来要更顺滑一些，同样也可以作为页面的加载动画。老规矩，我们还是先来实现一下相关的 html 代码，具体如下：
<!DOCTYPE html>
<html lang="en">
<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>CSS3 - 扁平预加载动画</title>
</head>
<body>
<div class="container">
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
通过上面的 html 结构就可以看出，我们在页面中实现的三个圆弧就是通过内层的三个 SPAN 标签完成的。然后通过 CSS 添加相应的动画让它们旋转起来，具体的 CSS 代码如下：
*{ margin: 0;padding: 0;list-style: none;font-style: normal;}
html, body {width: 100%; height: 100%;}
body {
display: grid;
justify-content: center;
align-content: center;
background-color: #ffcdd2;
.container {
position: relative;
span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: center center;
border: 6px solid #b71c1c;
border-radius: 50%;
animation: animate 1.5s linear infinite;
&:nth-child(1) {
width: 100px;
height: 100px;
border-bottom: 6px solid transparent;
animation: animate2 2s linear infinite;
}
&:nth-child(2) {
width: 60px;
height: 60px;
border-top: 6px solid transparent;
}
&:nth-child(3) {
width: 20px;
height: 20px;
border-bottom: 6px solid transparent;
}
}
}
}
@keyframes animate {
0% {
transform: translate(-50%, -50%) rotateZ(0);
}
100% {
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@keyframes animate2 {
0% {
transform: translate(-50%, -50%) rotateZ(0);
}
100% {
transform: translate(-50%, -50%) rotateZ(-360deg);
}
}
这个效果的实现也很简单，只需要注意最外层的圆弧和最内层的圆弧的口是相对的，并且最外层圆弧的动画和里面两层圆弧的动画是相反的。通过前面学习的 animation 属性就可以完成这个效果了，最终的实现代码可以在这里进行查看
上面的两个效果很简单吧! 快快动手实现一下吧！
最后
灵活运用 html + css 能够实现很多很有意思的效果，主要还是需要对 css3 中新增的一些属性有一定的了解，这样才能让我们不借助其它工具就实现相关的动画效果。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
