css技巧Web 前端开发 前端开发那些事

纯css实现波浪动画【转】

2017-08-08  本文已影响0人  京东内部优惠券

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

效果图
HTML部分:
<span style="font-size:18px;">
  <div class="container">  
      <div class="wave"></div>  
  </div> 
</span> 

CSS部分:

<span style="font-size:18px;">.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);  
    }  
}</span>

原理:
原理十分简单,我们都知道,一个正方形,给它添加 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> 

最终效果图:

如果这篇文章帮助到了你,请动动小手点下喜欢,你的支持是我最大的动力!

上一篇 下一篇

猜你喜欢

热点阅读