svg+css实现圆形迷宫动画代码

代码语言:html

所属分类:动画

代码描述:svg+css实现圆形迷宫动画代码

代码标签: svg css 圆形 迷宫 动画 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
body {
	background: radial-gradient(circle, #0f0c29, #302b63);
	height: 100vh;
	margin: 0 auto;
}
svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-height: 100vh;
	max-width: 100vw;
}
</style>

  
  
</head>

<body translate="no">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g fill="none" stroke="#fff" stroke-width="1" stroke-linecap="square">
		<path d="M 43.02 56.99 A 9.88 9.88 90 1 1 50.01 59.88 M 55.68 36.32 A 14.81 14.81 90 0 1 64.82 50.01 M 63.7 55.68 A 14.81 14.81 90 0 1 39.53 60.48 M 36.32 55.68 A 14.81 14.81 90 0 1 35.19 50.01 M 36.32 44.34 A 14.81 14.81 90 0 1 44.34 36.32 M 42.45 31.76 A 19.75 19.75 90 0 1 68.26 42.45 M 69.76 50.01 A 19.75 19.75 90 0 1 68.26 57.57 M 63.98 63.98 A 19.75 19.75 90 0 1 57.57 68.26 M 50.01 69.76 A 19.75 19.75 90 0 1 31.76 57.57 M 30.26 50.01 A 19.75 19.75 90 0 1 31.76 42.45 M 32.55 32.55 A 24.69 24.69 90 0 1 50.01 25.32 M 54.83 25.79 A 24.69 24.69 90 0 1 63.73 29.48 M 67.47 32.55 A 24.69 24.69 90 0 1 74.23 54.83 M 72.82 59.46 A 24.69 24.69 90 0 1 70.54 63.73 M 67.47 67.47 A 24.69 24.69 90 0 1 63.73 70.54 M 59.46 72.82 A 24.69 24.69 90 0 1 45.19 74.23 M 36.29 70.54 A 24.69 24.69 90 0 1 32.55 67.47 M 29.48 63.73 A 24.69 24.69 90 0 1 25.79 45.19 M 27.2 40.56 A 24.69 24.69 90 0 1 29.48 36.29 M 66.47 25.37 A 29.63 29.63 90 0 1 70.96 29.06 M 77.38 38.67 A 29.63 29.63 90 0 1 61.35 77.38 M 38.67 77.38 A 29.63 29.63 90 0 1 33.55 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0