概述

我们常常在网站中看到一些画线的动画效果，非常炫酷，大多数这种画线动画效果是通过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. dskinlite(uieasy mfc界面库)使用记录4:绘制动态元素（listbox）

    效果图: XML代码: 299行的headerctrl只针对listview有效,这里是listbox,忽略 wirelessName,wirelessStatus,wirelessSignal会通过 ...

  2. google搜索引擎正确打开姿势

    Google搜索引擎 原文来自黑白之道微信公众号       https://mp.weixin.qq.com/s/Ey_ODP_mG00of5DPwcQtfg   这里之所以要介绍google搜索引 ...

  3. LNMP php缓存器下载

    一.LNMP php缓存器下载(1)配置环境变量 LC_ALLecho ‘export LC_ALL=C'>> /etc/profilesource /etc/profile 生效命令 ( ...

  4. mysql伪列

      <!-- NOTE:internal_name_trim使用的是伪列,而不是数据库返回的数据 --><select id="listByStoreIdAndPartsN ...

  5. EmWin 文本显示函数

    函数模型----------------------------------- 1:void GUI_DispChar(U16 c):  在当前窗口的当前文本位置处,使用当前字体显示单个字符.  c ...

  6. CSS绝对定位的原点：是在border上、padding上还是在content上？

    用了那么久的绝对定位,却一直没在意一个问题,就是绝对定位的原点,究竟是在盒模型的哪一处.今天想到这个问题,直接搜索没有找到标准文档,也没有搜索到相关的问题,于是决定自己动手实现一下看看,并把这个结果发 ...

  7. 动态库的链接和链接选项-L，-rpath-link，-rpath

    https://my.oschina.net/shelllife/blog/115958 链接动态库 如何程序在连接时使用了共享库,就必须在运行的时候能够找到共享库的位置.linux的可执行程序在执行 ...

  8. JSP页面使用include指令出现 Duplicate local variable basePath

    现有三个页面 " include.jsp " " a.jsp " " b.jsp " 页面代码如下 首先是a.jsp <%@ page ...

  9. 每日一练ACM 2019.04.14

    2019.4.14 第1001题:Sum Problem Problem DescriptionHey, welcome to HDOJ(Hangzhou Dianzi University Onli ...

  10. 2T以上磁盘格式化

    1.安装软件 对于 Debian/Ubuntu 用户, 使用 APT-GET 命令或者 APT 命令来安装 parted #apt-get install -y parted 对于 RHEL/Cent ...