概述

我们常常在网站中看到一些画线的动画效果，非常炫酷，大多数这种画线动画效果是通过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. IP报文头详解

    IPv4报头: 报头长度:20-60字节bytes 白色部分为固定头部部分(20 bytes),绿色option选项部分为可选部分. 固定头部大小计算: 4bit + 4bit + 8bit + 16 ...

  2. optional install error: Package require os(darwin) not compatible with your platform(win32)

    解决方法: cnpm rebuild node-sass cnpm install

  3. Oracle 开机自动启动设置

    步骤: 1:查看ORACLE_HOME是否设置 $ echo $ORACLE_HOME /u01/app/oracle/product//dbhome_1 2:执行dbstart 数据库自带启动脚本 ...

  4. python学习——用dictionary实现通过地区查询邮编

    刚刚学习了python的基本语法,对自己学习的内容进行实践下. dictionary字典(类似map) 总结:1.dictionary比list读取速度快,但是占用内存大,适合存放不需修改,经常查询的 ...

  5. VS 2017显示“高级保存选项”命令操作方法

    Visual Studio提供“高级保存选项”功能,它能指定特定代码文件的编码规范和行尾所使用的换行符.在Visual Studio 2017中,该命令默认是没有显示在“文件”菜单中的.用户需要手工设 ...

  6. 将bean转换成XML字符串

    package com.sinoservices.bms.bbl.rest.bean; import javax.xml.bind.annotation.XmlAccessType; import j ...

  7. java之路 打印1到100之间的数

    class Demo12{ public static void main(String[] args){ /** * 打印1到100之间的数 * 循环条件:1~100 * * 计数器 * */ // ...

  8. HDU-4763 Theme Section KMP

    题意:求最长的子串E,使母串满足EAEBE的形式,A.B可以任意,并且不能重叠. 题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4763 思 ...

  9. C++实现文件内字符数、单词数、行数的统计

    先给出github上的代码链接以及项目需求 1. 项目简介 这个项目的需求可以概括为:对程序设计语言源文件统计字符数.单词数.行数,统计结果以指定格式输出到默认文件中,以及其他扩展功能,并能够快速地处 ...

  10. lnmp 搭建 svn服务

    服务器环境 lnmp  环境搭建地址:https://lnmp.org/install.html 注意事项  服务器必须开放3690端口 安装过程 1.yum install subversion(安 ...