svg实现机械星爆动画效果代码
代码语言:html
所属分类:动画
代码描述:svg实现机械星爆动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #def; } svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; width: 100%; } </style> </head> <body translate="no"> <svg viewBox="0 0 100 100"> <g stroke-width="20"> <g transform="rotate(0 50 50)"> <circle cx="50" cy="50" r="0" stroke="#012" stroke-dasharray="0 9 6 4 5" fill="none"> <animate attributeName="r" values="0; 100" dur="30s" begin="0s" repeatCount="indefinite" /> </circle> </g> <g transform="rotate(60 50 50)"> <circle cx="50" cy="50" r="0" stroke="#345" stroke-dasharray="4 8 4 6 2" fill="none"> <animate attributeName="r" values="0; 100" dur="30s" begin="-2s" repeatCount="indefinite" /> </circle> </g> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0