有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。

首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设置为白色，加上圆角，圆角建议30%-45%之间，然后加上无限循环的旋转动画，通过内层div的旋转来实现波浪效果。

参考代码如下：

<style>
    #container{
        width:400px;
        height:200px;
        position: relative;
        border:1px solid #ccc;
        margin:300px auto;
        overflow: hidden;
        background:seagreen;
    }
    .wave{
        background:#fff;
        border-radius:32%;
        width:500px;
        height:500px;
        position:absolute;
        left:50%;
        bottom:68px;
        animation: go 8s infinite linear;
    }
    @keyframes go {
        0% {
            transform: translate(-50%, 0) rotateZ(0deg);
        }
        50% {
            transform: translate(-50%, -2%) rotateZ(180deg);
        }
        100% {
            transform: translate(-50%, 0%) rotateZ(360deg);
        }
    }

</style>
<body>
<div id="container">
    <div class="wave"></div>
</div>
</body>

使用纯css实现波浪效果的更多相关文章

  1. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  2. 一种巧妙的使用 CSS 制作波浪效果的思路

    在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...

  3. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  4. 纯css实现幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  6. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  7. IE7,8纯css实现圆角效果

    众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...

  8. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

  9. 纯CSS实现JS效果研究

    利用CSS3:checked选择器和~配合实现tab切换 效果: 代码: <style> body,div,input,label{ margin:0; padding:0; } #tab ...

随机推荐

  1. 6.6 Ubuntu 安装　截图工具　Shutter

    可参考: http://blog.csdn.net/hanshileiai/article/details/46843713

  2. 15. Bypass 360主机卫士SQL注入防御（多姿势）

    在服务器客户端领域,曾经出现过一款 360 主机卫士,目前已停止更新和维护,官网都打不开了,但服务器中依然经常可以看到它的身影. 从半年前的测试虚拟机里面,翻出了 360 主机卫士 Apache 版的 ...

  3. 第三周作业-课本&&视频学习

    <网络攻防技术与实践>第三周作业 Part I 寻找自己留在互联网上的足迹并消除隐私 1.1 google/baidu搜索自己的qq号 搜索结果如图,搜到的有用信息其实就是图上这么几条,能 ...

  4. HN669打包工具--打包工具使用文档

    打包工具主要包含下载更新资源文件以及打包两个部分 一.下载更新资源文件 1.终端进入工具根目录,即HN669SDK_iOS目录,并运行./api.sh脚本 2.输入游戏id (note:此游戏id为我 ...

  5. SqlServer(带中文注释)

    using System;using System.Data;using System.Xml;using System.Data.SqlClient;using System.Collections ...

  6. .NET 中文件嵌套,例如:cshtml文件下面嵌套css和js【机器翻译】

    越来越多的我发现自己在我的一些较大的Web项目中丢失了文件.有很多内容要处理 - HTML视图,几个派生CSS页面,页面级CSS,脚本库,应用程序范围的脚本和页面特定的脚本文件等等.幸运的是,我使用R ...

  7. OpenStack基础知识-virtualenv工具详解

    1.virtualenv介绍 virtualenv通过创建一个单独的虚拟化python运行环境,将我们所需的依赖安装进去,不同项目之间相互不干扰,从而解决不同的项目之间依赖不同,造成的冲突问题 2.安 ...

  8. 2017-10-19 NOIP模拟赛

    Count(哈格朗日插值) 题解: 有个定理,另sum(x)表示小于等于x的数中与x互质的数的和 sum(x)=φ(x)*x/2    最后可知f(x)=x  (f(1)=2)  当然打表能知道. 然 ...

  9. jsp 文件上传操作

    文件上传 1:完成一个文件上传的功能 index.jsp 注意更换form表单的enctype enctype就是encodetype就是编码类型的意思. multipart/form-data是指表 ...

  10. linux限制内存和磁盘使用

    一.如何限制用户的磁盘空间 1. 查看系统中所有用户的磁盘空间配额 sudo repquota /dev/vda1 2. 查看某个用户的磁盘空间配额 sudo edquota user_name 要想 ...