有时候我们需要实现水晃动的效果，其实我们可以通过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. 关于overflow:hidden （转）

    关于overflow:hidden   (本文只针对hidden这个值的用处进行阐述) 关于overflow:hidden;很多人都知道他是溢出隐藏的一个属性,但是并不是很多人知道它的一些神奇的地方! ...

  2. 具体问题:3、hibernate跟Mybatis/ ibatis 的区别，为什么选择？

    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...

  3. 在虚拟机环境(CentOS7系统)下将kubernetes中部署服务成功，但在虚拟机外部无法访问到服务

    在CentOS7环境下,kubernetes单机版环境,成功部署一个服务,在虚拟机中访问服务没问题,下面这样: curl http://172.27.73.26:8888/eureka-server/ ...

  4. Vue实现添加、删除、关键字查询

    从今天开始,将不定期更新关于 Vue 的学习以及各种方法的使用,好了,下面就开始吧 Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue,我为了省事就...),然后在HTML ...

  5. 采用DCT进行图像压缩

    一.实验目的:熟悉变换编码的图像压缩方法 二.实验内容:以所给图像为例,采用dct进行图像压缩编码,通过改变模板矩阵中非零元素的个数,得到不同缩编码图像, 根据公式 ,编写程序计算原图像和dct变换后 ...

  6. 华东交通大学2017年ACM“双基”程序设计竞赛 1002

    Problem Description 一天YZW参加了学校组织交际舞活动,活动的开始活动方分别给男生和女生从1-n进行编号,按照从小到大顺时针的方式进行男女搭档分配,相同编号的男女组合成一对,例如一 ...

  7. Uva1149

    每个bin最多只能放两个,所以最佳的贪心策略是从大的开始放,如果有空间放第二个,尽量放最大的. #include <bits/stdc++.h> using namespace std; ...

  8. JD孔_20160912

    1.买的 “航嘉(Huntkey)大白803 8位3米 总控开关 防过载保护 插座/排插/拖”  http://item.jd.com/1786149.html#product-detail 2.

  9. CentOS 7 iptables 开放8080端口

    # 安装iptables-services [root@localhost bin]# yum install iptables-services [root@localhost bin]# /bin ...

  10. Sqoop架构

    Sqoop 架构 Sqoop 架构是非常简单的,它主要由三个部分组成:Sqoop client.HDFS/HBase/Hive.Database.下面我们来看一下 Sqoop 的架构图. 用户向 Sq ...