svg实现机械星爆动画效果代码

代码语言:html

所属分类:动画

代码描述:svg实现机械星爆动画效果代码

代码标签: 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