<!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>

         html,

         body {

             height: 100%;

             display: flex;

             align-items: center;

             justify-content: center;

             background: linear-gradient(antiquewhite, navajowhite);

         }

         .sea {

             width: 300px;

             height: 300px;

             background-color: whitesmoke;

             background-image: linear-gradient(darkblue, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.5));

             border-radius: 5px;

             box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);

             position: relative;

             overflow: hidden;

         }

         .sea .title {

             color: white;

             font-size: 24px;

             font-family: serif;

             text-align: center;

             line-height: 252px;

             text-transform: uppercase;

             letter-spacing: 0.4em;

             position: absolute;

             z-index: 1;

             width: 100%;

         }

         .sea .wave {

             position: absolute;

             top: -250px;

             left: -100px;

             width: 500px;

             height: 500px;

             background: deepskyblue;

             border-radius: 43%;

             filter: opacity(0.4);

             animation: drift linear infinite;

             transform-origin: 50% 48%;

         }

         .sea .wave:nth-of-type(1) {

             animation-duration: 5s;

         }

         .sea .wave:nth-of-type(2) {

             animation-duration: 7s;

         }

         .sea .wave:nth-of-type(3) {

             animation-duration: 9s;

             background-color: orangered;

             filter: opacity(0.1);

         }

         @keyframes drift {

             from {

                 transform: rotate(360deg);

             }

         }

     </style>

 </head>

 <body>

     <div class="sea">

         <p class="title">the sea</p>

         <span class="wave"></span>

         <span class="wave"></span>

         <span class="wave"></span>

     </div>

 </body>

 </html>

css3 实现波浪（wave）效果的更多相关文章

  1. Css3实现波浪线效果1

    一.波浪线 ,常用 .info::before { content: ''; position: absolute; top: 30px; width: 100%; height: 0.25em; b ...

  2. Css3实现波浪效果2

    一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...

  3. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

  4. 使用 SVG 来实现波浪 (wave) 动画效果

    如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现.不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单.这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么 ...

  5. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  6. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  7. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  9. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  10. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

随机推荐

  1. 安卓Android基础第五天

    使用HttpUrlConnection方式提交到服务器2 Get方式:组拼url地址把数据组拼到url上,有大小限制1kb(浏览器)或4kb(http协议) Post方式:post方式提交安全,没有大 ...

  2. POJ 3074 Sudoku(算竞进阶习题)

    二进制优化+dfs 话说这题数据中真的丧心病狂..不加inline还过不去.. 因为不会DLX只好用二进制来优化了...万万没想到还是低空飘过 我们在行.列.格分别用一个9位二进制常数来记录什么数能放 ...

  3. mac 使用指南

    资料检索: Command + Option + Esc 查看进程或关闭 深度开源为OPEN other 工具使用: Alfred快捷键:option+space iTerm2命令行工具 SSH Sh ...

  4. 【hdu6188】Duizi and Shunzi（贪心）

    2017ACM/ICPC广西邀请赛 重现赛1007 Duizi and Shunzi 题意 有n张牌,问你最多能组成多少对子+顺子?一个牌只能用在一个顺子或者对子中. 题解 本来想写dp的,不会..小 ...

  5. ⌈洛谷1312⌋⌈NOIP提高组2011⌋Mayan游戏【搜索】

    感想 真的,感觉这道题目好坑爹,我这个蒟蒻调了好几个世纪才调出来. 重构代码千万遍,依旧只有-1输出. 正解 非常明显的一道搜索题目. 每一次记录上一级的状态,这样实现比较不容易出错. 然后考虑剪枝: ...

  6. pycharm 中的 全局搜索(ctrl+shift+f) 功能无法使用的原因

    全局搜索的时候Ctrl+Shift+F按键失灵,有的时候可以,有时又不行了,百思不得其解. 在網上搜索很多人說是搜狗输入法的快捷键冲突了,但是我的电脑用的是微软自带的输入法 后来打开微软的输入法设置发 ...

  7. 【原创】【状态压缩DP】POJ3254 Corn Fields【新手向】

    一开始根本不会状压dp,上网各种找题解,但发现他们写的都很......反正我作为一个没有接触过状态压缩的,根本看不懂! 然后看了好多状态压缩的题的题解,总结了一下思路,思路很重要,有了思路转换成计算机 ...

  8. 持久化和公平分发.py

    1.消息持久化在实际应用中,可能会发生消费者收到Queue中的消息,但没有处理完成就宕机(或出现其他意外)的情况,这种情况下就可能会导致消息丢失.为了避免这种情况发生,我们可以要求消费者在消费完消息后 ...

  9. BZOJ3029守卫者的挑战（概率dp）

    题目大意:给定n个事件,第i个事件发生的概率为pi,收益为ai,初始收益为k,求n个事件之后发生的事件数>=l且收益>=0的概率 收益只可能是正整数或-1. Solution dp[i][ ...

  10. ACM-ICPC 2015 BeiJing

    比赛连接:ACM-ICPC 2015 BeiJing 本次比赛只写了 A G     然后 I题随后补 A 有一个正方形土地,上面有若干块绿洲.让你以x0为界限划一条竖线,要求左边绿洲面积>=右 ...