代码说明：纯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. Flash/Flex获取外部参数

    Part One:Flex程序如何获取html容器传递的URL参数值 我们经常在Flex程序需要用从外部html向swf文件传递参数,(类似 test.html?name=jex&addres ...

  2. 1.shell编程之变量的高级用法

    1.1.变量替换 变量替换的六种形式 实例:非贪婪和贪婪的区别 从头部删除 [root@VM_0_9_centos shell_learn]# var_1="i love you,do yo ...

  3. 【转载】FAT12文件系统之引导扇区结构

    FAT12文件系统之引导扇区结构 文件系统即文件管理系统,是操作系统的重要组成部分之一,如果需要开发底层磁盘驱动或编写自己的操作系统,就必须详细了解文件系统. FAT12是Microsoft公司DOS ...

  4. RecyclerView（替代ListView）使用方法介绍

    在build.gradle文件加入以下代码 compile 'com.android.support:cardview-v7:21.0.3' compile 'com.android.support: ...

  5. Android的onMeasure方法

    在Android开发中,当Android原生控件不能满足我们的需求的时候,就需要自定义View.View在屏幕上绘制出来先要经过measure(计算)和layout(布局). 什么时候调用onMeas ...

  6. 图像处理之 opencv 学习---opencv 中的常用算法

    http://blog.csdn.net/lindazhou2005/article/details/1534234 文中有提到鲁棒性 http://blog.csdn.net/chary8088/a ...

  7. Apache Flink 1.5.1 Released

    Apache Flink: Apache Flink 1.5.1 Released http://flink.apache.org/news/2018/07/12/release-1.5.1.html ...

  8. pyspark mongodb yarn

    from pyspark.sql import SparkSession my_spark = SparkSession \ .builder \ .appName("myApp" ...

  9. 怎样在QML中利用Sprite来做我们须要的动画

    在游戏中动画的设计很中要. 在QML中,它提供了丰富的animation.可是有时我们须要对图像进行变化,就像放电影一样.在今天的这篇文章中,我们将设计一个能够变化图像的动画. 我们能够通过Qt所提供 ...

  10. 对 block 内存管理的一些看法

    首先交代一下retain cycle ,和 产生retain cycle后我们应该怎么处理. 1.retain cycle在block中是极易产生,block就是一段可以灵活使用的代码,你可以把它当做 ...