代码说明：纯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. to_char（sysdate,'D'）的用法

    select to_char(sysdate,'D') from dual;   这周的第几天:Day of week (1–7) 1,2,3,4,5,6,7--注意:每星期的第1天是”星期日“ se ...

  2. Arrays.asList基本用法

    目录 说明 基本用法 陷阱 改观 说明 asList 是 java.util.Arrays 类的一个方法 public static <T> List<T> asList(T. ...

  3. My app status is Ready for Sale but I cannot see my app on the App Store. Why? 为什么审核通过后 appstore中搜不到我的app

    这是苹果的官方解答 The following factors could prevent your app from showing up on the App Store: Make sure t ...

  4. python day - 17 面向对象的 类空间 和 组合

    1. 类命名空间 在类的代码中,当python 解释器在 运行的那一刻.就会在内存中开辟一个类空间,在类的空间中会加载静态变量,以及类方法的内存地址. 当类名+()(也就是实例化过程中),内存中会再次 ...

  5. HashMap存入大量数据是否要预定义存储空间

    按说HashMap的负载极限为0.75,可是,测试程序并看不出这个结果.待探讨 测试程序如下: 根据结果看不出来预定义有什么影响. public class test { public static ...

  6. NBUT 1222 English Game（trie树+DP）

    [1222] English Game 时间限制: 1000 ms 内存限制: 131072 K 问题描写叙述 This English game is a simple English words ...

  7. adb client, adb server, adbd原理浅析（附带我的操作过程）【转】

    本文转载自:http://blog.csdn.net/stpeace/article/details/24933813 adb是什么? adb就是Android调试桥,很形象啊. 先来看adb原理的逻 ...

  8. 计算机学院大学生程序设计竞赛（2015’12）01 Matrix

    01 Matrix Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  9. 一个小bug，关于fuse_mount_sys

    在mount.c  中的 int fuse_mount_sys 函数中,如果注销掉 fd的open语句,此时fd一般为0. 然后,用普通用户运行ssfs且不加-f参数,一切显示正常 fuse_moun ...

  10. hdu-2680 Choose the best route(最短路)

    题目链接: Choose the best route Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 32768/32768 K ( ...