有时候我们需要实现水晃动的效果，其实我们可以通过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. mahout 实现canopy

    环境: mahout-0.8 hadoop-1.1.2 ubuntu-12.04 理论这里就不说了,直接上实例: 下面举一个例子. 数据准备: canopy.dat文件,COPY到HDFS上,文件内容 ...

  2. MyBatis入门基础

    转自http://www.cnblogs.com/selene/p/4604605.html 话不多说,先看看原始的JDBC程序代码,看看这样的代码存在什么样子的问题. package com.uti ...

  3. vue 报错 Uncaught (in promise) error

    可尝试在then()后加上catch() ps:该图来自网络

  4. [C++]C,C++中使用可变参数

    可变参数即表示参数个数可以变化,可多可少,也表示参数的类型也可以变化,可以是int,double还可以是char*,类,结构体等等.可变参数是实现printf(),sprintf()等函数的关键之处, ...

  5. [WIP]laravel 入门

    创建: 2019/06/20 安装    composer brew install composer  laravel composer global require "laravel/i ...

  6. cf831D(dp)

    题目链接: http://codeforces.com/contest/831/problem/D 题意: 有 n 个人和 k 把钥匙, 数组 a 为 n 个人的初始位置, 数组 b 为 k 把钥匙的 ...

  7. python web开发之flask框架学习(1) 创建flask项目

    python 开发越来越火,作为菜鸟,也应该学习一下,感觉还可以,记录下来,方便学习参考. 不管做什么开发首先肯定是安装环境,这里我用的是pycharm,python3.如果不清楚怎么安装环境可以去网 ...

  8. 分层图最短路【bzoj2662】[BeiJing wc2012]冻结

    分层图最短路[bzoj2662][BeiJing wc2012]冻结 Description "我要成为魔法少女!" "那么,以灵魂为代价,你希望得到什么?" ...

  9. Servlet和HTTP请求协议

    Servlet和HTTP请求协议 Servlet和HTTP请求协议 Servlet和HTTP请求协议 有待补充... servlet servlet applet 概念 servlet是运行在服务器上 ...

  10. Git 通过https向码云推送项目