概述

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

    namespace 不同表在不同的namespace,可以做用户的权限控制 资源限制 限制每时间段请求的数量和大小 设置表的空间大小 修改hbase-site.xml文件 添加两个配置 hbase.q ...

  2. Saliency Detection via Graph-Based Manifold Ranking

    Saliency Detection via Graph-Based Manifold Ranking https://www.yuque.com/lart/papers 本文不是按照之前的论文那样, ...

  3. Ax2009中使用CLR发送邮件

    由于Ax2009系统方法SysMailer 发送中文的时候会乱码,一直找不到原因,用.NEt Framwork的类库可以解决中文乱码的问题.static void CKT_DotNetMail(Arg ...

  4. 如何在SpringBoot项目中使用拦截器

    相比springmvc,springboot中拦截器不需要在xml中配置,只需定义拦截器类 implements HandlerInterceptor 和拦截器拦截路径的配置类extends WebM ...

  5. [JavaScript] 弹出编辑框

    效果:单击图片copy,双击图片或者点Edit都会打开编辑窗口 Style <style> .black_overlay{ display: none; position: absolut ...

  6. 服务管理之NFS

    目录 NFS简介 1.1 nfs特点 1.4 nfs的应用场景 4. nfs管理 NFS简介 1.1 nfs特点 NFS(Network File System)即网络文件系统,是FreeBSD支持的 ...

  7. MySQL导入数据报 Got a packet bigger than‘max_allowed_packet’bytes 错误的解决方法

    MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致大数据写入或者更新失败. 通过终端进入mysql控制台,输入如下 ...

  8. java中产生HttpServletRequest等作用域

    protected ServletContext getServletContext() { return ServletActionContext.getServletContext();} pro ...

  9. shell脚本学习-练习写一个脚本1

    # 1.依次展示/etc/passwd中的用户名和UID.格式如:Hello,$USER,your UID is $UID. # 2.统计一个有多少个用户 #!/bin/bash #Program D ...

  10. C# byte[]数组和string的互相转化 (四种方法)

    C# byte[]数组和string的互相转化 (四种方法) 第一种 [csharp] view plain copy string str = System.Text.Encoding.UTF8.G ...