效果：

截图有点模糊~

实现：

《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. Mysql数据库mys和ora库的备份与恢复脚本

    !/bin/bash Time=$(date +%Y%md%H%M%S) Back_dir="$HOME/mysqlback/${Time}" function Detect_u_ ...

  2. 【原创】公司各个阶段 CTO 需要做什么？（上篇）

    CTO 是企业内技术最高负责人,对企业的发展起到至关重要的作用.但随着公司的不断发展,CTO 的工作重心也会不断变化.只有在正确的阶段做正确的事,才能更好地为公司做出贡献.我是空中金融 CTO ,TG ...

  3. api-gateway实践（13）新服务网关 - 断路保护/熔断机制

    参考链接:SpringCloud的Hystrix(五) Hystrix机制 新需求列表 1.在线测试 根据定义,生成输入界面, 点击测试, 验证参数,发起调用,返回执行结果 2.熔断保护 两个实现类: ...

  4. 修改了SpringBoot的主类名称后，gradle build报错的解决办法

    Unable to find a single main class from the following candidates [*.*Application]

  5. Linux CentOS7.0 （02）修改主机名和ip地址

    一.主机名修改 1.查看命令 在CentOS中,有三种定义的主机名:静态的(static),瞬态的(transient),和灵活的(pretty). "静态"主机名也称为内核主机名 ...

  6. 记录下项目中常用到的JavaScript/JQuery代码一（大量实例）

    一直没有系统学习Javascript和Jquery,每次都是用到的时候去搜索引擎查,感觉效率挺低的.这边把我项目中用的的记录下,想到哪写哪,有时间再仔细整理. 当然,由于我主要是写后端java开发,而 ...

  7. IT 必备电脑快捷键

    IT 必备电脑快捷键 键盘上除了有字母.数字之外,还有一些特殊的按键:ctrl.shift.alt.tab ● ctrl键是英语control“控制”的意思,这个按键,单独按没有任何作用,都要和其他的 ...

  8. create-keyframe-animation-js实现css3动画

    使用JavaScript在浏览器中动态生成CSS关键帧动画. enter(el, done) { // 设置动画帧数 let animation = { 0: { transform: `transl ...

  9. 完成 bass 库的频谱显示效果图

    效果如图所示,比 bass 官方自带的例子效果要好那么一点点(峰值有滞留)...

  10. 使用 C# (.NET Core) 实现命令设计模式 (Command Pattern)

    本文的概念内容来自深入浅出设计模式一书. 项目需求 有这样一个可编程的新型遥控器, 它有7个可编程插槽, 每个插槽可连接不同的家用电器设备. 每个插槽对应两个按钮: 开, 关(ON, OFF). 此外 ...