博客

新建.svg文件，粘贴如下代码即可，该svg构成为一个闪烁的实心圆与两个闪烁的外圈环，其中circle 中cx,cy为圆心位置，r为半径，fill为填充色，opacity为填充色的透明度， stroke-width为边框的宽度，stroke-opacity=".7"为边框的透明度，style中animation:blink 10000s infinite   代表使用 @keyframes中定义的blink动画，持续10000s,infinite 无限循环，animation其他参数如下。
animation-name: 动画名称(默认值为none)
animation-duration: 持续时间(默认值为0)
animation-timing-function: 时间函数(默认值为ease)
animation-delay: 延迟时间(默认值为0)
animation-iteration-count: 循环次数(默认值为1)
animation-direction: 动画方向(默认值为normal)
animation-play-state: 播放状态(默认值为running)
animation-fill-mode: 填充模式(默认值为none)

粘贴代码：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <style>
       #bound,#outCircle{
        animation:blink 10000s infinite;
        -webkit-animation:blink 3s infinite;
        }
        @keyframes  blink{
        0%{
        stroke:.2,
        stroke-opacity: 0;
        }
        20%{
        opacity: .3;
        stroke-opacity: .4;
        }
        40%{
        opacity: .5;
        stroke-opacity:.8;
        }
        60%{
        opacity: .7;
        stroke-opacity:1;
        }
        100%{
        opacity: 5;
        stroke-opacity: 0;
        }
        }
    </style>
<circle id="bound" cx="50%" cy="50%" r="20" fill="red" opacity=".7"/>
    <circle id="outCircle" cx="50%" cy="50%" r="25" stroke="red" stroke-width="3" fill="none" stroke-opacity=".7"/>
    <circle id="outCircle" cx="50%" cy="50%" r="38" stroke="red" stroke-width="3" fill="none" opacity=".7"/>
</svg>