<!DOCTYPE html>

<html>

  <head>

    <meta charset=utf-8>

    <title>css+svg实现波浪图</title>

    <link rel=FaviconIcon href=favicon.ico type=image/x-icon>

    <meta name=viewport content="width=device-width,initial-scale=1">

    <style type="text/css">

      body{

        background: linear-gradient(180deg,#3b5998 20%,#9575cd) fixed!important;

      }

      .editorial {

        display: block;

        width: 100%;

        height: 10em;

        margin-top: -10em;

        position: fixed;

        bottom: 0;

        z-index: -1

      }

      .parallax>use {

        animation: move-forever 12s linear infinite

      }

      .parallax>use:first-child {

        animation-delay: -5s;

        animation-duration: 12s

      }

      .parallax>use:nth-child(2) {

        animation-delay: -3s;

        animation-duration: 8s

      }

      .parallax>use:nth-child(3) {

        animation-delay: -4s;

        animation-duration: 5s

      }

      @keyframes move-forever {

        0% {

          transform: translate(-90px)

        }

        to {

          transform: translate(85px)

        }

      }

    </style>

  </head>

    <body class=hold-transition>

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" class="editorial"><defs><path id="gentle-wave" d="M-160 44c30 0

    58-18 88-18s

    58 18 88 18

    58-18 88-18

    58 18 88 18

    v44h-352z"></path></defs><g class="parallax"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="0" fill="rgba(255,255,255,.05)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="3" fill="rgba(255,255,255,.05)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="6" fill="rgba(255,255,255,.05)"></use></g></svg>

  </body>

</html>

　　

css3+svg实现波浪图的更多相关文章

  1. 用D3js的区域生成器实现简单波浪图

    最近做控件遇到含有波浪图的图表,一开始用Echarts虽然很快完成了,但Echarts的波浪图与其他图表的响应式不同步,于是学习了D3js,D3js写起来确实复杂一些,但能够实现的效果也更丰富,做的时 ...

  2. 16种基于 CSS3 & SVG 的创意的弹窗效果

    在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...

  3. 太可爱了！CSS3 & SVG 制作的米老鼠钟表

    米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...

  4. CSS3实现轮播图效果

    CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

  5. svg用作背景图

    svg用做背景图的几种方式 1. 直接使用 background: url('data:image/svg+xml;charset=utf-8,<svg width="10" ...

  6. SVG实现波浪效果

    SVG实现波浪效果 svg path:C 贝塞尔曲线绘制波浪形状   A 绘制圆弧形 svg animate:制作波浪动画,为了波浪动画效果自然,设置values关键点  attributeName: ...

  7. css3实现轮播图

    css3动画属性简写: animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode ...

  8. css3 svg路径蒙版动画

    css3 svg路径蒙版动画 具体看https://www.cnblogs.com/oubenruing/p/9568954.html 还有个更好控制的写法<pre><!DOCTYP ...

  9. css3 svg 物体跟随路径动画教程

    css3 svg 物体跟随路径动画教程https://www.jianshu.com/p/992488f3f3fc

随机推荐

  1. 765. 有效的三角形.md

    描述 给出三个整数 a, b, c, 如果它们可以构成三角形,返回 true. 三角形的定义 (Wikipedia) 样例 给定 a = 2, b = 3, c = 4 返回 true 给定 a = ...

  2. 在Node.js中在保持目录结构的情况下压缩指定目录

    最近在做一个文件升级的功能,需要从下载服务器中指定目录下的文件.在学习了zlib后发现这个模块达不到这个功能 在查找资料后发现后发现 archiver 模块很好用,不过我也发现大部分中文资料没有如果查 ...

  3. BZOJ.2115.[WC2011]Xor(线性基)

    题目链接 \(Description\) 给定一张无向带边权图(存在自环和重边).求一条1->n的路径,使得路径经过边的权值的Xor和最大.可重复经过点/边,且边权和计算多次. \(Soluti ...

  4. BZOJ4738 : 汽水

    二分答案$mid$,若存在一条路径满足$|ave-k|<mid$,则答案至多为$mid-1$. 若$ave\leq k$,则$\sum(w-k)\leq 0$,且$\sum(k-w-mid)&l ...

  5. python系统编程（六）

    threading注意点 1. 线程执行代码的封装 通过上一小节,能够看出,通过使用threading模块能完成多任务的程序开发,为了让每个线程的封装性更完美,所以使用threading模块时,往往会 ...

  6. Java WebSocket HttpSession与WebSocket Session的关联

    当HttpSession中止(通过显示地失效或超时)时,Web容器会把HttpSession属性从HttpSession中清除. javax.servlet.http.HttpSessionBindi ...

  7. unity windowEditor平台下鼠标左键控制摄像机的视角

    工作的原因,今天就只写了unity下的鼠标左键控制摄像机的视角左右上下调节:明天,补齐.[有诸多参考,着实是需要多多加油的] using System.Collections; using Syste ...

  8. ios开发中字符串的常用功能总结

    1.分割字符串 NSString * str1 = @"123/456"; NSArray * arr1 = [str1 componentsSeparatedByString:@ ...

  9. JAVA自学笔记21

    JAVA自学笔记21 1.转换流 由于字节流操作中文不是非常方便,因此java提供了转换流 字符流=字节流+编码表 1)编码表 由字符及其对应的数值组成的一张表 图解: 2)String类的编码和解码 ...

  10. pygame-KidsCanCode系列jumpy-part7-游戏启动/结束画面

    通常一个游戏启动(start)或结束(game over)时,都会显示一个画面,来引导用户.这节,我们学习如何处理这块逻辑. 其实之前,我们已经预留了2个函数,只要把它实现即可: def show_s ...