代码说明：纯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. 使用网络监视器（IRSI）捕捉和分析协议数据包

    转载请注明原地址. 实验名称:  理解子网掩码.网关和ARP协议的作用             一.实验目的和要求 (1) 熟悉IRIS的使用 (2) 验证各种协议数据包格式 (3) 学会捕捉并分析各 ...

  2. val();html();.text()区别 setInterval与setTimeout的区别

    val();html();.text()区别   对于innerHTML 属性,几乎所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML.(获取HTM ...

  3. hibernate载入持久化对象的两种方式——get、load

    一.get与load对照 在hibernate中get和load方法是依据id取得持久化对象的两种方法.但在实际使用的过程中总会把两者混淆,不知道什么情况下使用get好,什么时候使用load方法效率更 ...

  4. FSB总线、HT总线、QPI总线、DMI总线

    http://wenku.baidu.com/link?url=d0NQFyvVpU--FpQUIjkPcdE036riitKgKib3385qr7VdB1oNUcIDpRndY-HH4ITjzJln ...

  5. java设计模式----复合模式

    复合模式:复合模式结合两个或以上的模式,组成一个解决方案,解决一再发生的一般性问题 要点: 1.MVC是复合模式,结合了观察者模式.策略模式和组合模式 2.模型使用观察者模式,以便观察者更新,同时保持 ...

  6. MyCAT简单入门配置

    MyCAT简单入门配置 安装jdk 建议1.7以上 安装mysql 安装MyCAT Mycat 源码:https://github.com/MyCATApache/Mycat-Server Mycat ...

  7. cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c

    cat /proc/cpuinfo | awk -F: '/name/{print $2}' | uniq -c

  8. 修改STM32库函数中的晶振值

    STM32F407的库文件中默认晶振值为25MHz,若外接晶振8MHz,则需修改以下几个地方: 1)修改HSE_VALUE的值 将#define HSE_VALUE ((uint32_t)250000 ...

  9. mysql 查询表死锁 和结束死锁的表步骤以及锁表等级

    1.查询是否锁表show OPEN TABLES where In_use > 0; 2.查询进程 show processlist  查询到相对应的进程===然后 kill    id 补充: ...

  10. 探讨Ajax中有关readyState（状态值）和status（状态码)的问题

    先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function ...