概述

我们常常在网站中看到一些画线的动画效果，非常炫酷，大多数这种画线动画效果是通过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. P3383 【模板】线性筛素数

    因为数据很大所以要用线性筛.. #include<iostream> #include<cstdio> using namespace std; typedef long lo ...

  2. 我的第一个flink_java程序

    之前看了视频学习第一个flink  word count使用,但是对于socket发送数据作为数据源我这里有点忘记了,加上最近有个项目要发布,一直在忙,所以迟迟无法完成: 1.首先我们要有数据源,因为 ...

  3. HTTP协议之url详解

    HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 URL,全称是U ...

  4. mysql 字段指定值靠前排序方法，多字段排序排序方法

    背景:SEO下选择某查询条件 查询展示信息为装修设计师以及设计师作品.设计师原型设计为:选择某风格 例如:简约,则列表出现拥有简约风格的设计师信息以及该设计师类型为简约的作品(3条靠前记录) 浏览原型 ...

  5. C++ 中利用 Opencv 得到不规则的ROI 区域(已知不规则区域)

    因为需要,之前写了一个利用mask 得到不规则ROI 区域的程序. 现在需要修改,发现自己都看不懂是怎么做的了.. 所以把它整理下来. 首先利用 鼠标可以得到 你想要的不规则区域的 顶点信息.具体这里 ...

  6. oracle 中如何查看某个表所涉及的存储过程

    SELECT DISTINCT * FROM user_source WHERE TYPE = 'PROCEDURE' AND upper(text) LIKE '%PS_KL_ABS_002_DAT ...

  7. linux 挂载ntfs格式的硬盘

    一.安装ntfs 1.下载 sudo wget  https://tuxera.com/opensource/ntfs-3g_ntfsprogs-2017.3.23.tgz 2.解压 sudo tar ...

  8. 探寻TP-Link路由器的登录验证

    提示:该案例仅供学习使用,切勿滥用!!! 查找路由器连接地址 查找ip $ ifconfig enp2s0: flags=<UP,BROADCAST,RUNNING,MULTICAST> ...

  9. JS模块化工具require.js教程(二)：基本知识

    前一篇:JS模块化工具我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,r ...

  10. python data science handbook1

    import numpy as np import matplotlib.pyplot as plt import seaborn; seaborn.set() rand = np.random.Ra ...