<!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. SpringBoot整合Mybatis完整详细版二：注册、登录、拦截器配置

    接着上个章节来,上章节搭建好框架,并且测试也在页面取到数据.接下来实现web端,实现前后端交互,在前台进行注册登录以及后端拦截器配置.实现简单的未登录拦截跳转到登录页面 上一节传送门:SpringBo ...

  2. Spring cloud Eureka错误锦集（一）

    初学Spring cloud的时候,启动Eureka的时候报了下面的错误: com.sun.jersey.api.client.ClientHandlerException: java.net.Con ...

  3. JavaScript基础笔记（一）基本概念

    基本概念 一.语法 一)区分大小写 二)标识符 书写规则同Java 三)注释 略 四)严格模式 1.在整个脚本中启用严格模式:在顶部添加 "use strict" 2.指定函数在严 ...

  4. [P3625][APIO2009]采油区域 (前缀和)

    这道题用二维前缀和可以做 难度还不算高,细节需要注意 调试了很久…… 主要是细节太多了 #include<bits/stdc++.h> using namespace std; #defi ...

  5. 游戏UI规范

    在满足效果的前提下,尽量做到UI资源做到复用和最小化 1.  背景1和背景2分开切,可以组合成各种不同的面包背景图 2.  背景1和背景2在没有花纹的情况下,中间纯色的部分切4个像素做就公共个缩放就可 ...

  6. ionic2引入cordova插件时提示 no provider for * 错误

    直接上答案,如果出现这个错误,直接在component里添加一行代码: import { FileOpener } from '@ionic-native/file-opener'; @Compone ...

  7. AnjularJS表单回车提交事件

    问题: 输入手机号之后,再验证码输入框点击回车时,触发发送验证码事件. <div class="login-main"> <form name="log ...

  8. HTTP协议2

    一．响应协议 格式: (1)响应首行:HTTP协议版本,不可默认 (2)响应头信息:可以默认 响应内容是由服务器发送给浏览器的内容,浏览器会根据响应内容来显示 (3)空行: (4)响应体: 响应内容是 ...

  9. CSS_对齐

    2016-10-25 <css入门经典>第15章 1.text-align属性: 块属性内部的文本对齐方式.该属性只对块盒子有意义,内联盒子的内容没有对齐方式.(注意:只是盒子内部的内容对 ...

  10. [转]通过设置nginx的client_max_body_size解决nginx+php上传大文件的问题

    转:http://blog.csdn.net/zhengwish/article/details/51602059 通过设置nginx的client_max_body_size解决nginx+php上 ...