纯css实现波浪动画【转】

作者: 京东内部优惠券 | 来源:发表于2017-08-08 10:09 被阅读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> 

最终效果图:

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

相关文章

  • 纯css实现波浪动画【转】

    前言:之前在博客上看到一位大神用css实现的水波动画,真是受益匪浅,原来本以为要会svg、canvas等技术,原来...

  • CSS奇技淫巧之实现波浪效果

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯 CSS 的...

  • 前端-纯CSS实现波浪效果!

    一直以来,使用纯 CSS 实现波浪效果都是十分困难 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方...

  • 纯CSS实现动态波浪效果

    在预备做这个动效之前,参考了网上的教程,结果当然是需要借助贝塞尔曲线。本人却偏好css,因为纯css实现贝赛尔曲线...

  • 纯CSS 实现波浪移动效果

    在某些页面上常常看到波浪的效果,虽然只有装饰的作用,但是却让页面看上去更生动了,同时某些情况下也能起到进度条的作用...

  • CSS3动画属性实现幻灯片效果

    纯CSS实现的幻灯片效果:查看demo; 实现思路 既然想实现动画效果,那么就需要用到CSS3中的@keyfram...

  • 纯css实现小狗动画

    css3已经非常强大了但是有些大佬居然用html+css写出了一个小狗。如图 话不多说直接上代码 演示地址http...

  • 两种纯CSS轮播图

    忙碌的618过后,抽点时间回顾最近这段时间CSS选择器和CSS动画的应用学习试了试用纯CSS来实现轮播图效果。 自...

  • web前端入门到实战:10分钟入门 CSS3 Animation

    Animation可以让你不用依赖javascript或jquery,用纯CSS在网页中轻松实现各种动画效果。 兼...

  • 纯css实现117个Loading效果(上)

    本文转自:纯css实现117个Loading效果(上)[https://juejin.cn/post/703703...

网友评论

    本文标题: 纯css实现波浪动画【转】

    本文链接:https://www.haomeiwen.com/subject/sszzlxtx.html