代码说明：纯CSS实现，无JS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>描边动画</title>
    <style>
        body { margin: 0; text-align: center; }
        svg { margin-top: 200px; }
        #circle {
            stroke-dasharray: 120px 120px;
            /*描边动画就是控制stroke-dashoffset属性值来实现的*/
            stroke-dashoffset: 120px;
            fill: orange;
            fill-opacity: 0;
            stroke: orange;
            stroke-width: 2px;
            animation: rotation 3s ease-in-out infinite, gradually 3s ease-in-out infinite;
            animation-fill-mode: forwards;
        }
        #true {
            fill: transparent;
            stroke: #ffffff;
            stroke-opacity: 0;
            stroke-width: 2px;
            animation: popup 3s ease-in-out infinite;
        }
        /*边框旋转动画声明*/
        @keyframes rotation {
            0% {
                stroke-dashoffset: 120px;
            }
            20%,100% {
                stroke-dashoffset: 0;
            }
        }
        /*背景色渐进动画声明*/
        @keyframes gradually {
            0%, 20% {
                fill-opacity: 0;
            }
            40%, 100% {
                fill-opacity: 1;
            }
        }
        /*符号弹出动画声明*/
        @keyframes popup {
            0%, 40% {
                transform: scale(1);
                stroke-opacity: 0;
            }
            50% {
                transform: scale(1.1);
            }
            60%, 100% {
                stroke-opacity: 1;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40">
　　<!-- 在画布中创建一个圆 -->
    <circle id="circle" cx="20" cy="20" r="19" stroke="orange"></circle>
　　<!-- 创建一个对号 -->
    <path id="true" d="M10,20 l6,6 16,-16" ></path>
</svg>

</body>
</html>
效果图：


这里面的代码片段如果有不认识的不要急，接下来我会分享一些SVG常用的一些属性

注：这个动画还是比较简单的，我做这个动画的难点主要是在动画分时间片运作我这里的解决方案是统一一个动画时间，然后在动画声明那里将时间片分隔开如果你有更好地解决方案欢迎在评论区分享你的经验

SVG动画 -- 描边动画的更多相关文章

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

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

  2. SVG实现描边动画

    说起SVG,我是恨它又爱它,恨它是因为刚开始接触的时候自己傻B地想用代码去写它,其实在web上我们用它做交互也只是用了几个常用的特性而已,其他的标签知道这么一回事就成了,其实说白了它就是一种图片格式, ...

  3. svg文字描边动画

    svg动画在网页中是经常见到的,svg动画使得网页看起来清新美观 任何不规则图形都可以由svg绘制完成,当然也包括文字,文字本身就可以看作一个不规则图形

  4. 使用snapjs实现svg路径描边动画

    一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问题,结果就这样变难了呀,在网上查一会之后,突然 ...

  5. anime.js 实战：实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  6. SVG描边动画原理

    SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...

  7. SVG描边动画实现过程

    准备工具:Adobe AI+PS 1.确定SVG画布的大小,在PS中切出需要描边效果的区域,以此区域的大小做为SVG容器的大小.   2.将PS中切好的图片直接拖拽到AI中     3.使用AI中的钢 ...

  8. SVG的路径动画效果

    使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...

  9. 超级强大的SVG SMIL animation动画详解

    本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...

随机推荐

  1. 软件系统架构 https://www.lanhusoft.com/Article/349.html

    跟蓝狐学习Nop--NopCommerce源码架构详解专题目录 Posted By : 蓝狐 Updated On : 2018-04-16 14:46 我们承接以下nop相关的业务,欢迎联系我们. ...

  2. async & await 的前世今生（Updated）----代码demo

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. Comparable 和 Comparator的理解

    对Comparable 的解释 Comparable是一个排序接口 此接口给实现类提供了一个排序的方法,此接口有且只有一个方法 public int compareTo(T o); compareTo ...

  4. HashMap底层原理以及与ConCurrentHashMap区别

    HashMap基于hashing原理,我们通过put()和get()方法储存和获取对象.当我们将键值对传递给put()方法时,它调用键对象的hashCode()方法来计算hashcode,让后找到bu ...

  5. label 对齐

    <label for="username">用户名</label> <input type="text" id="use ...

  6. java中InputStream String

    Java 中获取输入流时,有时候须要将输入流转成String,以便获取当中的内容 ,以下总结一下 InputStream 转成String 的方式  方法1: public String conver ...

  7. MapReduce算法形式一：WordCount

    MapReduce算法形式一:WordCount 这种形式可以做一些网站登陆次数,或者某个电商网站的商品销量啊诸如此类的,主要就是求和,但是求和之前还是要好好清洗数据的,以免数据缺省值太多,影响真实性 ...

  8. Cooperating sequential processes》，这篇论文提出了大名鼎鼎的概念信号量，Java里面用于线程同步的wait/notify也是信号量的一种实现。

    闲话高并发的那些神话,看京东架构师如何把它拉下神坛 https://mp.weixin.qq.com/s/lAqn8CfSRta9iSvOR1Le6w

  9. HDU 5651xiaoxin juju needs help

    xiaoxin juju needs help Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  10. C/S转分布式数据库的解决方法

    C/S转分布式数据库的解决方法1. 直接VPN建一个网不就行了.(大概是虚拟成一个网络)2. 直连也可以,就是速度慢3. 还是三层吧,推荐RTC4. 弄个花生壳硬件试试呢,成本低,不用改程序5. 搞一 ...