css3+图片制作圆形球状水波荡漾效果

李逸风

于 2018-11-22 20:18:18 发布

阅读量6.2k

点赞数 7

分类专栏：插件代码文章标签：水波荡漾 css3动画

本文链接：https://blog.youkuaiyun.com/sheng_li/article/details/84347987

版权

偶然看别人网站上有个这个效果，刚开始觉得应该是canvas或者svg做的。但是仔细一看有三个部位，就感觉是图片+css做的。查看下代码后果然是，然后好奇心使然，就把它扒下来了，供大家参考。

先上效果图：

他的布局和代码结构也很简单，就是用三个div 做三个背景图，设置不同的opacity。然后通过css3的animate 结合 keyframes做的一个从左往右的动画。

完整代码我也贴出来，大家拿去参考。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body, div, h1, h2, h3, html, li, p, ul {
            margin: 0;
            padding: 0;
            box-sizing: border-bo