新建.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"
x