<!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. 实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

  2. Shell脚本笔记（八）循环

    循环 一.whlie和until循环 while循环基本语法: while <条件表达式> do 指令 done #注意代码缩进 util循环基本语法: until <表达式> ...

  3. LeetCode(12. 整数转罗马数字)

    问题描述 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II , ...

  4. BZOJ3945 : 无聊的邮递员

    因为两个人方案的对称性,可以将$k$除以$2$,转化为在$n-1$个间隔中设置若干断点,求第$k$小的增量. 对于选中的相邻的断点$(a,a+1)$和$(b,b+1)$,增量为$|x_a-x_{b+1 ...

  5. shell脚本使用技巧3--函数调用

    定义函数 function fname() { statements; } 或者 fname() { statements; } 传递参数给函数: fname arg1 arg2; ex: 函数参数定 ...

  6. jsp 出现cannot be resolved to a type问题解决办法

    (1)检查<%@ page import>是否导入了相关的包.若是没有则需导入 (2)若导入相应的包后问题仍然存在则需创建相关的servlet

  7. iOS自动布局的学习

    Autolayout: 最重要的两个概念: 约束:对控件位置和大小的限定条件 参照:对控件设置的约束是相对于哪一个视图而言的 自动布局的核心计算公式: obj1.property1 =(obj2.pr ...

  8. Vue（八）发送跨域请求

    使用vue-resource发送跨域请求 axios不支持跨域 1 安装vue-resource并引入 cnpm install vue-resource -S 2 基本用法 使用this.$http ...

  9. hihocoder1712 字符串排序（思维）

    https://hihocoder.com/problemset/problem/1712 感觉解法呼之欲出,却出不来.. 一个很好的思路是,根据新的顺序表,把给定的n组字符串换成旧表对应的字符,然后 ...

  10. javagc日志详解

    https://blog.csdn.net/aliveTime https://plumbr.io/blog/garbage-collection/understanding-garbage-coll ...