『 CSS实战』CSS3 实现一些好玩的效果(5)_vue css风险等级变化水波球体-CSDN博客

本文链接：https://blog.csdn.net/Android062005/article/details/126859530

水波浪球体动画效果

在日常的开发中，当页面在加载时，我们一般都会添加一个 loading 效果，避免让用户长时间处于一个白屏的状态。今天我们就来实现一个 水波浪球体动画效果，用于日常的 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 - 3D水波浪球体动画效果</title>
</head>
<body><section class="circle"><span class="wave"></span></section>
</body>
</html>

html 代码相对来说比较简单，页面中的元素也只有两层，那么我们要如何通过这简单的两层元素实现一个水波效果呢？下面一起来看一下 css 的具体实现，代码如下：

*{ margin: 0;padding: 0;list-style: none;}
html, body {width: 100%; height: 100%;}

body {display: flex;justify-content: center;align-items: center;background-color: #fff;.circle {width: 150px;height: 150px;border: 5px solid #fff;box-shadow: 0 0 0 5px #4973ff;border-radius: 50%;overflow: hidden;.wave {display: block;position: relative;width: 100%;height: 100%;background-color: #4973ff;border-radius: 50%;box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);&::after, &::before {content: '';position: absolute;width: 200px;height: 200px;top: 0;left: 50%;transform: translate(-50%, -75%) rotate(0);background-color: #000;}&::before {border-radius: 45%;background-color: rgba(255, 255, 255, 1);animation: animateWave 5s linear infinite;}&::after {border-radius: 40%;background-color: rgba(255, 255, 255, .5);animation: animateWave 5s linear infinite;}}}
}

@keyframes animateWave {0% {transform: translate(-50%, -75%) rotate(0); }100% {transform: translate(-50%, -75%) rotate(360deg);}
}

以上样式通过 less 编写，编译后会自动转换为 css 代码。在这个效果中，主要是通过设置内层元素的伪类，将伪类覆盖在父级元素上，然后通过 animation 属性给伪类元素添加相应的动画，其中最重要的一点是需要设置伪类的偏移和旋转角度，即 transform: translate(-50%, -75%) rotate(0)，通过不断变化这两个数值，就实现了这个 水波浪球体动画效果。

最终的代码实现可以在这里进行查看

阴阳八卦阵

在上面我们通过 CSS3 中的 animation 属性和 transform 属性制作了一个 水波浪球体动画 的效果，下面我们继续来实现一个更有趣的 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 - 3D立体阴阳无极八卦阵</title>
</head>
<body><section class="container"><span class="shape"></span></section>
</body>
</html>

这个效果的 html 代码跟上面的一样，都比较简单，最终实现还是通过 css 来完成的，下面我们一起来看 css 的代码，如下：

*{ margin: 0;padding: 0;list-style: none;}
html, body {width: 100%; height: 100%;}

body {display: grid;justify-content: center;align-items: center;background-color: #fff;.container {background-color: #000;border-radius: 50%;border: 10px solid #000;transform: perspective(800px) rotateX(45deg);box-shadow: 0 10px 0 #383838, 0 10px 15px rgba(0, 0, 0, .5);position: relative;top: -30px;.shape {display: block;width: 200px;height: 100px;border-bottom: 100px solid #fff;border-radius: 50%;position: relative;animation: animate infinite linear 3s;&::before {content: '';position: absolute;top: 50%;left: 0;width: 20px;height: 20px;background-color: #000;border: 40px solid #fff;border-radius: 50%;}&::after {content: '';position: absolute;top: 50%;right: 0;width: 20px;height: 20px;background-color: #fff;border: 40px solid #000;border-radius: 50%;}}}
}

@keyframes animate {0% {transform: rotate(360deg);}100% {transform: rotate(0);}
}

这个效果中，主要也是运用 CSS3 中的 perspective 属性，将视口往后拉伸了 800px，因此看起来像睡倒在页面中，然后通过内层元素的伪类实现阴阳无极，最后再使用 animation 属性是阴阳无极转动起来，最终的实现代码可以在这里进行查看

怎么样，上面的实现是不是很简单呢？快快动手实现一下吧！