<!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. DOCKER 是什么?!

    Docker,改变程序世界的箱子 给产品经理讲技术 • 2016-01-14 • 深氪 Docker的道理和集装箱一样. 本文来自微信公众号“给产品经理讲技术”(pm_teacher),欢迎大家关注. ...

  2. 洛谷 P2814 家谱(gen)

    题目背景 现代的人对于本家族血统越来越感兴趣. 题目描述 给出充足的父子关系,请你编写程序找到某个人的最早的祖先. 输入输出格式 输入格式: 输入由多行组成,首先是一系列有关父子关系的描述,其中每一组 ...

  3. 1489 ACM 贪心

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1489 题意:为负数表示买酒,正数表示买酒,每两家人之间为one unit of work.问最小的work ...

  4. [JOISC2014]友だちをつくろう

    [JOISC2014]友だちをつくろう 题目大意: 一个\(n(n\le10^5)\)个点,\(m(m\le2\times10^5)\)条边的有向图.对于两个点\(i,j\),如果存在一个点\(k\) ...

  5. （转）为什么不能从静态的方法里面调用非静态方法,或变量and类加载机制

    1. 程序最终都将在内存中执行,变量只有在内存中占有一席之地时才能被访问. 类的静态成员(变量和方法)属于类本身,在类加载的时候就会分配内存,可以通过类名直接去访问:非静态成员(变量和方法)属于类的对 ...

  6. C++学习笔记49:栈

    栈是一种只能从一端访问的线性数据结构,栈是一种后进先出的数据结构 //stack.h #ifndef STACK_H #define STACK_H #include <cassert> ...

  7. 深入理解JVM（2）——揭开HotSpot对象创建的奥秘

    一.对象创建的过程:当虚拟机遇到一条含有New的指令时,会进行一系列对象创建的操作. 检查常量池中是否含有带创建对象所属类的符号引用 a) 如果含有的话,直接进行下一步 b) 如果常量池中没有这个符号 ...

  8. ISAPI多进程设置

    ISAPI多进程设置 IIS默认配置下采用的是单工作进程的工作模式,也就是只启用一个w3wp.exe进程处理所有请求,然后进程内启用多个线程来处理并发请求,最大工作线程数由具体的操作系统和IIS来决定 ...

  9. Socket.IO学习之基础入门

    原文:http://blog.csdn.net/weichuang_1/article/details/48831957 这里贴出Socket.IO官网 一.Socket.IO的介绍 Socket.I ...

  10. 异常 Exception 知识点总结 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...