<!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. XamarinSQLite教程在Xamarin.Android项目中提取数据库文件

    XamarinSQLite教程在Xamarin.Android项目中提取数据库文件 由于不能直接打开该文件,开发者需要先将数据库文件从Android系统中提取出来.操作步骤如下. (5)选择MyDoc ...

  2. 241. String to Integer

    描述 Given a string, convert it to an integer. * You may assume the string is a valid integer number t ...

  3. Java代码优化小结（三）

    (35)对资源的close()建议分开操作虽然有些麻烦,却能避免资源泄露.我们想,如果没有修改过的代码,万一XXX.close()抛异常了,那么就进入了catch块中了,YYY.close()不会执行 ...

  4. synchronized(){}同步代码块笔记(新手笔记,欢迎纠正)

    /* 内容:同步代码块,目的是解决多线程中的安全问题.什么安全问题呢??就是在执行run方法时,假如线程-0刚刚获得执行权, *还没执行时,就挂那了,这时线程-1获得执行权,并进行执行,就有可能出现负 ...

  5. Python——运算符

    Python算术运算符 以下假设变量: a=10,b=20: 运算符 描述 实例 + 加 - 两个对象相加 a + b 输出结果 30 - 减 - 得到负数或是一个数减去另一个数 a - b 输出结果 ...

  6. Android 如何判断指定服务是否在运行中 “Service”

    如何判断一个服务是否正在运行中: /** * 判断某个服务是否正在运行的方法 * * @param mContext * @param serviceName 是包名+服务的类名 * @return ...

  7. Java 接口 Closeable

    该接口位于java.io包下,声明如下:public interface Closeable extends AutoCloseable.关闭流并释放与该流关联的所有系统资源.如果已经关闭该流,则调用 ...

  8. pytorch0.4版的CNN对minist分类

    卷积神经网络(Convolutional Neural Network, CNN)是深度学习技术中极具代表的网络结构之一,在图像处理领域取得了很大的成功,在国际标准的ImageNet数据集上,许多成功 ...

  9. Quartz 定时器任务调度配置(以及如何配置quartz启动执行一次)

    1. 添加maven依赖.pom.xml 中添加jar文件 <!-- 作业任务调度机制 --> <dependency> <groupId>org.quartz-s ...

  10. CiscoIOUKeygen

    python CiscoIOUKeygen.py | grep -A 1 ‘license’ > iourc