概述

我们常常在网站中看到一些画线的动画效果，非常炫酷，大多数这种画线动画效果是通过SVG实现的，也有不少是用纯css实现的，下面我总结了一下这2种方法，供以后开发时参考，相信对其他人也有用。

参考资料：

移动端网页

PC端网页

SVG实现画线效果

在svg里面，可以用stroke-dashoffset属性来实现画线效果，示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>svg</title>

  <style>

  path{

      stroke-dasharray: 1000;

      stroke-dashoffset: 1000;

      animation: draw 5s ease 3;

  }

  @keyframes draw{

      0%{

          stroke-dashoffset: 1000;

      }

      100%{

          stroke-dashoffset: 0;

      }

  }

  </style>

</head>

<body>

<svg width="400px" height="400px" viewBox="100 250 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <path d="M153 334

  C153 334 151 334 151 334

  C151 339 153 344 156 344

  C164 344 171 339 171 334

  C171 322 164 314 156 314

  C142 314 131 322 131 334

  C131 350 142 364 156 364

  C175 364 191 350 191 334

  C191 311 175 294 156 294

  C131 294 111 311 111 334

  C111 361 131 384 156 384

  C186 384 211 361 211 334

  C211 300 186 274 156 274"

  style="fill:white;stroke:red;stroke-width:2"/>

</svg>

</body>

</html>

需要注意的是，必须要设置stroke-dasharray属性，并且和stroke-dashoffset一样长；其中1000是个自定义的值，只要比画线的总长度长就行了。

纯css画线

对于长方形或者正方形这些规则的图形，用css的transition效果即可，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>svg</title>

  <style>

    #border {

      position: relative;

      width: 300px;

      height: 300px;

    }

    .border-top {

      position: absolute;

      top: 50px;

      left: 50px;

      width: 0;

      height: 8px;

      background-color: #333;

      transition: all .5s 1s;

    }

    .border-bottom {

      position: absolute;

      bottom: 50px;

      right: 50px;

      width: 0;

      height: 8px;

      background-color: #333;

      transition: all .5s 2s;

    }

    .border-right {

      position: absolute;

      top: 50px;

      left: 250px;

      width: 8px;

      height: 0;

      background-color: #333;

      transition: all .5s 1.5s;

    }

    .border-left {

      position: absolute;

      bottom: 50px;

      left: 50px;

      width: 8px;

      height: 0;

      background-color: #333;

      transition: all .5s 2.5s;

    }

    .animate .border-top, .animate .border-bottom {

      width: 200px;

    }

    .animate .border-right, .animate .border-left {

      height: 200px;

    }

  </style>

</head>

<body>

  <div id="border">

    <i class="border-top"></i>

    <i class="border-right"></i>

    <i class="border-bottom"></i>

    <i class="border-left"></i>

  </div>

  <script>

    setTimeout(function() {

      document.getElementById('border').className += ' animate';

    }, 500);

  </script>

</body>

</html>

画线动画——SVG版和纯CSS版的更多相关文章

  1. WPF 画线动画效果实现

    原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...

  2. HTML自定义radio单选按钮(纯css版,样式可以随意改变)

    html: <div> <input id="item1" type="radio" name="item" value= ...

  3. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  4. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  5. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. [stm32] 利用uc-gui封装画图和画线函数移植51上的模拟动画

    >_<:这里的动画是黄色矩形区域中一个模仿俯视图的起重机运作动画,一个是模仿主视图的吊钩的运动.通过改变初始Init函数中的数据b_x,b_y实现矩形区域的移动.当实时采集时要首先根据起重 ...

  8. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

  9. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

随机推荐

  1. Mysql数据库性能优化（一）

    参考 http://www.jb51.net/article/82254.htm 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要 ...

  2. Visual Studio连接Oracle数据库

    一.安装Oracle Developer Tools for Visual Studio 2015 其他的什么client一概不要装,装了的直接卸载. 下载时需要登录,如果之前已经注册账号,提醒一下密 ...

  3. NC 63凭证辅助相关表

    1:通过公司主键(pk_org)在AccChartVO(表:bd_accchart)找:pk_accchart 2:通过科目编码和pk_accchart在AccAsoaVO(表:bd_accasoa) ...

  4. springcolud文章收藏

    https://blog.csdn.net/dyc87112/column/info/14412https://blog.csdn.net/dyc87112/article/details/79357 ...

  5. redis多实例

    1.首先在发布系统: 2.安装多实例利用cmd命令安装,切换目录到redis下 (1)首先拷贝一个redis的conf文件(如redis_6380.conf),并且修改里面的服务端口号.日志端口号,以 ...

  6. Lambda根据属性名字选择或筛选

    using System; using System.Linq.Expressions; internal class LambdaHelper { /// <summary> /// 指 ...

  7. promise和生成器的结合

    if(Promise.wrap){ Promise.wrap = function(fn){ return function(){ var args = [].slice.call(arguments ...

  8. Maven捆绑TestNG实现测试自动化执行、部署和调度

    一. 需求介绍 自动化测试,尤其是接口测试时,要写大量的测试用例,这些测试用例我们当然首选使用TesteNG编写,用例数量大,还涉及各种依赖包之类的问题,因此用Maven管理也是最方便最易实现的. 面 ...

  9. MFC中添加控制台输出

    可以在CWinApp的InitInstance()中调用下面的函数,以生成控制台: #include <io.h> #include <fcntl.h> void InitCo ...

  10. python pandas.DataFrame.append

    1.使用append首先要注意的是,你要合并两个DataFrame的columns即列名是否是相同的,不相同的就会报错. 2.我们会发现DataFrame的列名是不能够重复的,而行名(index)是可 ...