效果：

截图有点模糊~

实现：

《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. Python-面向对象（一）-Day7

    Day7-面向对象基础 1一.isinstance(obj, cls) 1二.issubclass(sub, super) 1三.异常处理 11.异常基础 12.异常种类 23.异常其他结构 54.主 ...

  2. eclipse怎么停止building workspace

    Eclipse 一直不停 building workspace完美解决总结 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭 3.maven下载lib挂起 等.. 二.解决总结 (1).解决方 ...

  3. 新概念英语（1-143）A walk through the woods

    Lesson 143 A walk through the woods 林中散步 Listen to the tape then answer this question. What was so f ...

  4. Ajax.html:35 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org

    AJAX的容易错误的地方 Ajax.html:35 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated ...

  5. spark2.1：flatMap的用法

    代码示例: val sample_data_combine_result=List( (0,(List(FitModel(4022,1447.92,-8.38983306721434,2.0)),1) ...

  6. 南阳OJ-2-括号配对问题---栈的应用

    题目链接: http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=2 题目大意: 有一行括号序列,请你检查这行括号是否配对. 思路: 直接用栈来模拟 ...

  7. 自定义Loader

    自定义Loader涉及到的接口: public delegate byte[] CustomLoader(ref string filePath); public void LuaEnv.AddLoa ...

  8. 关于div包裹img，底下多出3px间隙的问题

    背景:昨天写过一个div包裹图片的html,已经reset了所有的div,但还是发现img与div底部会有3px的间距,我检查了所有的css,发现并未发现什么问题,结果度娘了一下,发现好多朋友都遇到了 ...

  9. JDK和tomcat的安装配置

    一.JDK8安装与配置 分别配置如下三个系统变量 JAVA_HOME设置变量值为java JDK的安装目录例如: C:\Program Files\Java\jdk1.8.0 PATH添加变量值 %J ...

  10. Centos常用命令之：搜索

    在linux中,所有的文件都是以目录树的形式存在的.而每个发行版的文件存放之间又会有些差别. 这时候,如果我们想看某个命令或者文档的时候就必须先通过某种方式找到改文档的所在位置. 在linux中提供了 ...