效果：

截图有点模糊~

实现：

《svg教程》

//html

<body>

  <svg class="wave-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">

    <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 xlink:href="#gentle-wave" x="50" y="0" fill="rgba(224,233,239,.5)"></use>

      <use xlink:href="#gentle-wave" x="50" y="3" fill="rgba(224,233,239,.5)"></use>

      <use xlink:href="#gentle-wave" x="50" y="6" fill="rgba(224,233,239,.5)"></use>

    </g>

  </svg>

</body

　

//css

*{

  margin:0;

  }

  body{

    background: #2196f3;

  }

  .wave-container{

    margin-top:200px;

    width: 100%;

    height: 150px;

  }

  .parallax>use {

      animation: wave-move 12s linear infinite

  }

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

      animation-delay: -2s

  }

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

      animation-delay: -2s;

      animation-duration: 5s

  }

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

      animation-delay: -4s;

      animation-duration: 3s

  }

  @keyframes wave-move {

    0% {

        transform: translate(-90px,0)

    }

    100% {

        transform: translate(85px,0)

    }

  }

　　

　

-----------------------------------------

<style>

    .svg-wrapper {

        height: 80px;

        margin: 60px auto 0;

        position: relative;

        width: 255px;

        background:#ddd;

    }

    .shape {

        fill: transparent;

       /* stroke-dasharray: 208 540;

        stroke-dashoffset: -359;

        stroke-width: 8px;*/

        stroke-width: 0;

        stroke: red;

    }

    .svg-wrapper:hover .shape {

        -webkit-animation: 0.5s draw linear forwards;

        -moz-animation: 0.5s draw linear forwards;

        animation: 0.5s draw linear forwards;

    }

    @keyframes draw{

        0% {

          stroke-dasharray: 140 540;

          stroke-dashoffset: -474;

          stroke-width: 8px;

        }

        100% {

            stroke-dasharray: 760;

            stroke-dashoffset: 0;

            stroke-width: 8px;

        }

    }

  </style>

<div class="svg-wrapper">

   <svg height="80" width="255" xmlns="http://www.w3.org/2000/svg">

      <rect class="shape" height="80" width="255"></rect>

  </svg>

</div>

　　

三、原形进度条

<svg width="150px" height="150px" class="svg" xmlns="http://www.w3.org/2000/svg" >

    <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>

    <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="471px" />

</svg>

   <style>

    svg {

       transform: rotate(-90deg);

    }

    .progress {

        animation: rotate 15000ms linear both;

    }

    @keyframes rotate {

        from {

            stroke-dashoffset: 471px;

        }

        to {

            stroke-dashoffset: 0px;

        }

    }

    </style>

　　

svg和css实现波浪动效的更多相关文章

  1. CSS揭秘—打字动效（四）

    前言:     所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但 ...

  2. 从浏览器渲染层面解析css3动效优化原理

    引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让 ...

  3. CSS动效集锦，视觉魔法的碰撞与融合（二）

    引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...

  4. js+css 动效+1的效果

    点击数值 +1 的动效 vue data:{ timer: null,plus:''// 次数 } method:{ animate(plus) { var _this = this; clearIn ...

  5. 玩转HTML5移动页面(动效篇)

    原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...

  6. 前端必须收藏的CSS3动效库！！！

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  7. 【js】插件—动效Velocity.js

    Velocity.js——加速JavaScript动画 一款替代jQuery的$ .animate()动效的插件.兼容IE8和Android2.3及以上. 相比较优点: 1.它比JQuery更快,并实 ...

  8. 【总结】前端必须收藏的CSS3动效库！！！

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  9. 玩转HTML5移动页面（动效篇）

    为一名前端,在拿到设计稿时你有两种选择: 快速输出静态页面 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些 ...

随机推荐

  1. jenkins创建multibranch pipeline

    参考以下文章进行实践: https://jenkins.io/doc/pipeline/tour/hello-world/#what-is-a-jenkins-pipeline (看见一个介绍的还不错 ...

  2. 哪些异常是RuntimeException？Sql异常属于RuntimeException吗？Spring下SQL异常事务回滚

    一,为什么框架中根本没有对Exception的一般子类进行回滚配置,异常发生时,事务都进行了回滚 ,说好的只会对RuntimeException(Unchecked 非受检异常)回滚呢? 此时,我们就 ...

  3. Docker学习（1）安装

    1. Docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱 ...

  4. hive:某张表进行分页

    已知表myobject(objectid int) create table myobject(objectid int) row format delimited fields terminated ...

  5. 收藏：视频网站（JavaEE+FFmpeg）/Nginx+ffmpeg实现流媒体直播点播系统

    FFmpeg安装(windows环境)http://www.cnblogs.com/xiezhidong/p/6924775.html 最简单的视频网站(JavaEE+FFmpeg)http://bl ...

  6. XPath 轴

    XML 实例文档 我们将在下面的例子中使用此 XML 文档: <?xml version="1.0" encoding="ISO-8859-1"?> ...

  7. requests-证书验证

    import requests #response = requests.get('https://www.12306.cn') #print(response.status_code) #以上会显示 ...

  8. Ubuntu Sublime 配置

    p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 2018.4.14 Ubuntu Sublime 配置 承 Ubuntu Apach ...

  9. 【贪心】Codeforces 349B.Color the Fence题解

    题目链接:http://codeforces.com/problemset/problem/349/B 题目大意 小明要从9个数字(1,2,--,9)去除一些数字拼接成一个数字,是的这个数字最大. 但 ...

  10. 百度tn劫持解决办法

    最近用右键进行百度搜索的时候总是会跳转到 tn=99135173这类的小尾巴,使得搜索失败,十分恶心,这种广告劫持的手段十分高明隐蔽,很难发觉.开始以为是dns劫持或者是电脑中毒了,更换了几个dns, ...