svg+css实现圆形迷宫动画代码
代码语言:html
所属分类:动画
代码描述: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