效果：

截图有点模糊~

实现：

《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. Docker学习笔记 - Docker Compose

    一.概念 Docker Compose 用于定义运行使用多个容器的应用,可以一条命令启动应用(多个容器). 使用Docker Compose 的步骤: 定义容器 Dockerfile 定义应用的各个服 ...

  2. maven入门（1-2）settings.xml

    一.简介 settings.xml对于maven来说相当于全局性的配置,用于所有的项目, 当Maven运行过程中的各种配置,例如pom.xml,不想绑定到一个固定的project或者要分配给用户时, ...

  3. Python 爬取淘宝商品信息和相应价格

    !只用于学习用途! plt = re.findall(r'\"view_price\"\:\"[\d\.]*\"',html) :获得商品价格和view_pri ...

  4. Python3安装Requests

    安装Requests费了1天的时间,囧.终于还是在官网找到解决方法,可以参考这个http://docs.python-requests.org/en/latest/user/install/#inst ...

  5. vue2.0项目引入element-ui

    在项目中,为了方便我们工作和开发效率,常常引入一些框架来帮助我们完成高效的工作,今天我们就用vue来搭建一下框架,并且引入element-ui这个框架.安装流程也是我从失败中摸索到的,希望能帮助大家. ...

  6. Python之Scrapy爬虫框架 入门实例（一）

    一.开发环境 1.安装 scrapy 2.安装 python2.7 3.安装编辑器 PyCharm 二.创建scrapy项目pachong 1.在命令行输入命令:scrapy startproject ...

  7. c#获取网络时间并同步本地时间

    通过TCP形式来获取NTP时间.主要代码如下: [DllImport("kernel32.dll")] private static extern bool SetLocalTim ...

  8. [LeetCode] Minimum Index Sum of Two Lists 两个表单的最小坐标和

    Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite ...

  9. [LeetCode] Distribute Candies 分糖果

    Given an integer array with even length, where different numbers in this array represent different k ...

  10. Java基础知识回顾之四 ----- 集合List、Map和Set

    前言 在上一篇中回顾了Java的三大特性:封装.继承和多态.本篇则来介绍下集合. 集合介绍 我们在进行Java程序开发的时候,除了最常用的基础数据类型和String对象外,也经常会用到集合相关类. 集 ...