效果：

截图有点模糊~

实现：

《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. 阿里云API网关（7）开发指南-API参考

    网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...

  2. EasyUI DataGrid - 嵌套的DataGrid

    实现效果: 一.在页面头部引用视图脚本JS文件 <script src="@Url.Content("~/Resources/EasyUI/plugins/datagrid- ...

  3. 运维-替换kibana徽标

    作为一名纯运维人员,想更改kibana的徽标. 并不能像开发一样去看源码并修改源码. 所以我们可以替换徽标. 先来一个效果图.我的版本是5.5.1. 具体的修改过程: 在kibana安装路径下面. o ...

  4. python之集合，深浅copy

    一. 集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. ...

  5. CSS属性操作/下

    CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...

  6. SpringMVC(三)：@RequestMapping中的URL中设定通配符，可以使用@PathVariable映射URL绑定的占位符

    1)带占位符的URL是Spring3.0新增的功能,该功能在SpringMVC向REST目标挺进发展过程中具有里程碑的意义. 2)通过@PathVariable可以将URL中占位符参数绑定到控制器处理 ...

  7. C#使用Socket实现一个socket服务器与多个socket客户端通信

    在分布式调度系统中,如果要实现调度服务器与多台计算节点服务器之间通信,采用socket来实现是一种实现方式,当然我们也可以通过数据存储任务,子节点来完成任务,但是往往使用数据作为任务存储都需要定制开发 ...

  8. Spring（四）：Spring整合Hibernate，之后整合Struts2

    背景: 上一篇文章<Spring(三):Spring整合Hibernate>已经介绍使用spring-framework-4.3.8.RELEASE与hibernate-release-5 ...

  9. jacascript document对象

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! Document 类型表示文档,或文档的根节点,这个节点是隐藏的,没有具体的节点标签:而 html 是根标 ...

  10. Django REST framework+Vue 打造生鲜超市（六）

    七.用户登录与手机注册 7.1.drf的token (1)INSTALL_APP中添加 INSTALLED_APPS = ( ... 'rest_framework.authtoken' ) toke ...