代码说明：纯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. PHP读取excel(4)

    这一小节内容主要是PHPExcel读取少量excel数据,具体代码如下: <?php //数据较少的时候,一次性读取出来放到数组里 header("Content-Type:text/ ...

  2. numpy - 数组索引

    numpy 数组索引 一.单个元素索引 一维数组索引 >>> x = np.arange(10) >>> x[2] 2 >>> x[-2] 8 二 ...

  3. 简单的glib测试(三)

    #include <stdlib.h> #include <stdio.h> #include <string.h> #include <locale.h&g ...

  4. excel 创建数据有效性及背景颜色

    需求:用excel做数据或者表格时经常需要在一列中给出固定的几个进行悬着,这是如果每次键盘输入降低工作效率.如果做成鼠标双击进行选择,则提高很多效率,比如需要给一列填写Pass或Failure时,具体 ...

  5. Swift中字符串转化为Class的方法

    Swift中字符串转化为Class的方法 在开发中有时候会根据字符串进行对应类的转化,这样我们就可以动态根据服务器返回的字段,动态的加载类,比如优酷,微博等APP会在节假日等动态的TabBar.这样可 ...

  6. MapReduce算法形式三：cleanup

    案例三:cleanup 其实这个案例可以不用写这么复杂,不用cleanup也能写,但是为了,突显,突显,突显(重要的事说四遍)cleanup的重要性,琢磨了半天,恩,这样写既可以突显cleanup又显 ...

  7. android studio Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 400 Bad Request"

    android studio运行会遇到Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 400 Bad Reques ...

  8. [原创] Karen and Supermarket 2

    在回家的路上,凯伦决定到超市停下来买一些杂货. 她需要买很多东西,但因为她是学生,所以她的预算仍然很有限. 事实上,她只花了b美元. 超市出售N种商品.第i件商品可以以ci美元的价格购买.当然,每件商 ...

  9. MySQL alter语句

    1:删除列 ALTER TABLE [表名字] DROP [列名称] 2:增加列 ALTER TABLE [表名字] ADD [列名称] INT NOT NULL  COMMENT '注释说明' 3: ...

  10. (linux)SD卡初始化-mmc_sd_init_card函数

      为了学习SD/SDIO协议,看了一下linux中初始化SD卡的流程,结合代码更容易SD初始化是怎么做的. 下面图截自:"SD Specifications Part 1 Physical ...