纯css实现波浪动画，超级简单

来源：互联网发布：淘宝美工班编辑：程序博客网时间：2024/06/05 06:18

前言：之前在博客上看到一位大神用css实现的水波动画，真是受益匪浅，原来本以为要会svg、canvas等技术，原来根本不需要，只需css简短的十几行代码就可以达到效果。关键是大神的这种思路，非常之得我们学习，不多说了，直接上代码。

HTML部分：

<div class="container"><div class="wave"></div></div>

CSS部分：

.wave {position: relative;width: 200px;height: 200px;background-color: rgb(118, 218, 255);border-radius: 50%;}.wave:before,.wave:after{content: "";position: absolute;width: 400px;height: 400px;top: 0;left: 50%;background-color: rgba(255, 255, 255, .4);border-radius: 45%;transform: translate(-50%, -70%) rotate(0);animation: rotate 6s linear infinite;z-index: 10;}.wave:after {border-radius: 47%;background-color: rgba(255, 255, 255, .9);transform: translate(-50%, -70%) rotate(0);animation: rotate 10s linear -5s infinite;z-index: 20;}@keyframes rotate {50% {transform: translate(-50%, -73%) rotate(180deg);} 100% {transform: translate(-50%, -70%) rotate(360deg);}}

原理：

原理十分简单，我们都知道，一个正方形，给它添加 border-radius: 50%，将会得到一个圆形。

border-radius：用来设置边框圆角，当使用一个半径时确定一个圆形。

好的，如果 border-radius 没到 50%，但是接近 50% ，我们会得到一个这样的图形：

注意边角，整个图形给人的感觉是有点圆，却不是很圆。

好的，那整这么个图形又有什么用？还能变出波浪来不成？

没错！就是这么神奇。:) 我们让上面这个图形滚动起来(rotate) ，看看效果：

可能很多人看到这里还没懂旋转起来的意图，仔细盯着一边看，是会有类似波浪的起伏效果的。

而我们的目的，就是要借助这个动态变换的起伏动画，模拟制造出类似波浪的效果。

图中的虚线框就是我们实际的视野范围。

怎么样，看到这里是不是一下就打开思路了。

最终代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.wave {    position: relative;    width: 200px;    height: 200px;    background-color: rgb(118, 218, 255);    border-radius: 50%;}.wave:before,.wave:after{        content: "";        position: absolute;        width: 400px;        height: 400px;        top: 0;        left: 50%;        background-color: rgba(255, 255, 255, .4);        border-radius: 45%;        transform: translate(-50%, -70%) rotate(0);        animation: rotate 6s linear infinite;        z-index: 10;    }    .wave:after {       border-radius: 47%;        background-color: rgba(255, 255, 255, .9);        transform: translate(-50%, -70%) rotate(0);        animation: rotate 10s linear -5s infinite;        z-index: 20;    }@keyframes rotate {    50% {        transform: translate(-50%, -73%) rotate(180deg);    } 100% {        transform: translate(-50%, -70%) rotate(360deg);    }}</style></head><body><div class="container">    <div class="wave"></div></div></body></html>

最终效果图：

阅读全文

0 0