原文地址:https://segmentfault.com/a/1190000014895634

感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到。

HTML代码:

  1. <div class="sea">
  2. <p class="title">the sea</p>
  3. <span class="wave"></span>
  4. <span class="wave"></span>
  5. <span class="wave"></span>
  6. </div>

CSS代码:

  1. html, body {
  2. margin:;
  3. padding:;
  4. height: 100%;
  5. display: flex;
  6. justify-content: center;
  7. align-items: center;
  8. background: linear-gradient(antiquewhite, navajowhite);
  9. }
  10. .sea {
  11. position: relative;
  12. width: 300px;
  13. height: 300px;
  14. background-color: whitesmoke;
  15. background-image: linear-gradient(
  16. darkblue,
  17. rgba(255, 255, 255, 0) 80%,
  18. rgba(255, 255, 255, 0.5));
  19. border-radius: 5px;
  20. box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  21. overflow: hidden;
  22. }
  23. /* 这里只有水平居中和行高一定 */
  24. .sea .title {
  25. position: absolute;
  26. width: 100%;
  27. color: white;
  28. font-size: 24px;
  29. font-family: serif;
  30. text-align: center;
  31. line-height: 250px;
  32. text-transform: uppercase;
  33. letter-spacing: 0.4em;
  34. z-index:;
  35. }
  36. /* 制作海浪动画效果: 让三个平面按不同时间旋转 */
  37. .sea .wave {
  38. position: absolute;
  39. top: -250px;
  40. left: -100px;
  41. width: 500px;
  42. height: 500px;
  43. background: deepskyblue;
  44. border-radius: 43%;
  45. filter: opacity(0.4);
  46. /* 加大海浪的波动幅度:设置旋转元素的基点位置 */
  47. transform-origin: 50% 48%;
  48. animation: drift linear infinite;
  49. }
  50. .sea .wave:nth-of-type(1) {
  51. animation-duration: 5s;
  52. }
  53. .sea .wave:nth-of-type(2) {
  54. animation-duration: 7s;
  55. }
  56. .sea .wave:nth-of-type(3) {
  57. animation-duration: 9s;
  58. /* 增加颜色差异 */
  59. background-color: orangered;
  60. filter: opacity(0.1);
  61. }
  62. @keyframes drift {
  63. from {
  64. transform: rotate(360deg);
  65. }
  66. }

24.纯 CSS 创作出平滑的层叠海浪特效的更多相关文章

  1. 前端每日实战:24# 视频演示如何用纯 CSS 创作出平滑的层叠海浪特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教程 此视频 ...

  2. 如何用纯 CSS 创作出平滑的层叠海浪特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教 ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 22.纯 CSS 创作出美丽的彩虹条纹文字

    原文地址:https://segmentfault.com/a/1190000014858628 感想: 利用四个span的::before 和 ::after创出多个WEB,给其颜色,绝对定位,再利 ...

  5. 72.纯 CSS 创作气泡填色的按钮特效

    原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...

  6. 23.1纯 CSS 创作一个菜单反色填充特效

    交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...

  7. 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...

  8. 14.纯 CSS 创作一种侧立图书的特效

    原文地址:https://segmentfault.com/a/1190000014751037 HTML代码: <div class="books"> <div ...

  9. 如何用纯 CSS 创作一种侧立图书的特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...

随机推荐

  1. ASP.NET Web APIs 基于令牌TOKEN验证的实现(保存到DB的Token)

    http://www.cnblogs.com/niuww/p/5639637.html 保存到DB的Token 基于.Net Framework 4.0 Web API开发(4):ASP.NET We ...

  2. Thinkphp 缓存和静态缓存局部缓存设置

    1.S方法缓存设置 if(!$rows = S('indexBlog')){ //*$rows = S('indexBlog') $rows = D('blog')->select(); S(' ...

  3. modbus tcp 入门详解

    Modbus tcp 格式说明 通讯机制 附C#测试工具用于学习,测试   前言: 之前的博客介绍了如何用C#来读写modbus tcp服务器的数据,文章:http://www.cnblogs.com ...

  4. NIO基本操作

    NIO是Java 4里面提供的新的API,目的是用来解决传统IO的问题 NIO主要有三大核心部分:Channel(通道),Buffer(缓冲区), Selector(选择器) Channel(通道) ...

  5. spring 整合Junit学习

    测试一般是测试的局部功能,使用时需要自己写个测试相关的spring配置文件,比较费劲,所以常用的是纯配置的方式来实现测试. @RunWith(SpringJUnit4ClassRunner.class ...

  6. hadoop长时间运行后,stop-all.sh报错

    报错现象: hadoop在stop-all.sh的时候依据的是datanode上的mapred和dfs进程号. 而默认的进程号保存在/tmp下,linux默认会每 隔一段时间(一般是一个月或者7天左右 ...

  7. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  8. MATLAB的一些小技巧

    写论文要将图片保存为tiff格式,还要求dpi,还要标注,真是麻烦,下面的命令是最方便的程序化处理方式了 MATLAB text标注后 保存为 tiff 图片,图片到边框间无空白 clear all; ...

  9. [UE4]世界坐标、本地坐标

    本地坐标 世界坐标

  10. centos7+apache+svn配置 踩坑,注意权限问题。apache应用目录checkout应用 必须用这个命令:svn co file:///home/svn/test/ test ,通过svn add * &&commit 及任意修改都是不行的

    阅读帮助 命令提示符 [root@server-002 ~]# 表示当前服务root用户执行的命令 [svn@server-002 ~]$ 表示普通用户svn执行的命令 [root@localhost ...