svg圆盘加载动画效果代码
代码语言：html
所属分类：动画
代码描述：svg圆盘加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: black;
position: relative;
width: 100%;
}
svg {
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</head>
<body>
-
<svg width="200" height="200" viewBox="0 0 790 790" shape-rendering="geometricPrecision">
<defs>
<mask id="mask">
<image id="maskImage" transform="rotate(50 395 395)" xlink:href="//repo.bfw.wiki/bfwrepo/image/5e2b80eb53d22.png" x="0" y="0" height="100%" width="100%">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 395 395" to="360 395 395" dur="1.8s" repeatCount="indefinite" />
</image>
</mask>
</defs>
<rect width="100%" height="100%" fill="black" />
<g fill="#363636" id="grey">
<path d="M399,173.245c0,2.209-1.791,4-4,4l0,0c-2.209,0-4-1.791-4-4v-162c0-2.209,1.791-4,4-4l0,0
c2.209,0,4,1.791,4,4V173.245z" />
<path d="M379.658,173.74c0.192,2.201-1.436,4.141-3.637,4.333l0,0c-2.2,0.193-4.141-1.436-4.333-3.636
L357.569,13.054c-0.192-2.201,1.436-4.141,3.636-4.333l0,0c2.201-0.192,4.141,1.436,4.334,3.636L379.658,173.74z" />
<path d="M360.433,175.919c0.384,2.175-1.068,4.25-3.245,4.634l0,0c-2.175,0.384-4.25-1.069-4.633-3.245
L324.424,17.77c-0.384-2.175,1.069-4.25,3.243-4.634l0,0c2.177-0.383,4.251,1.069,4.635,3.245L360.433,175.919z" />
<path d="M341.47,179.765c0.572,2.134-0.693,4.328-2.828,4.9l0,0c-2.133,0.572-4.327-0.695-4.898-2.829
l-41.929-156.48c-0.571-2.134,0.695-4.328,2.827-4.899l0,0c2.136-0.571,4.328,0.695,4.9,2.829L341.47,179.765z" />
<path d="M322.915,185.25c0.756,2.076-0.313,4.372-2.391,5.128l0,0c-2.074,0.756-4.371-0.315-5.126-2.391
l-55.407-152.23c-0.755-2.076,0.315-4.372,2.389-5.127l0,0c2.078-0.756,4.372,0.314,5.129,2.391L322.915,185.25z" />
<path d="M304.909,192.331c0.934,2.002,0.068,4.383-1.936,5.317l0,0c-2,0.934-4.382,0.067-5.314-1.936
L229.195,48.891c-0.934-2.003-0.066-4.383,1.933-5.316l0,0c2.004-0.934,4.383-0.068,5.318,1.935L304.909,192.331z" />
<path d="M287.589,200.954c1.104,1.913,0.45,4.36-1.465,5.466l0,0c-1.911,1.104-4.359,0.448-5.463-1.465l-81-140.295
c-1.104-1.914-0.448-4.361,1.462-5.464l0,0c1.915-1.105,4.36-0.45,5.467,1.464L287.589,200.954z" />
<path d="M271.086,211.054c1.267,1.809,0.828,4.304-0.983,5.573l0,0c-1.808,1.267-4.304,0.826-5.569-0.984
L171.613,82.94c-1.267-1.811-0.826-4.306,0.98-5.57l0,0c1.812-1.268,4.305-0.828,5.573,0.982L271.086,211.054z" />
<path d="M255.526,222.554c1.419,1.691,1.199,4.215-0.495,5.637l0,0c-1.689,1.419-4.215,1.198-5.633-0.495
L145.266,103.598c-1.419-1.693-1.198-4.217,0.491-5.635l0,0c1.694-1.421,4.217-1.2,5.638,0.493L255.526,222.554z" />
<path d="M241.027,235.366c1.562,1.561,1.562,4.094-0.001,5.659l0,0c-1.56,1.561-4.095,1.561-5.655-0.002
l-114.553-114.55c-1.561-1.563-1.561-4.097-0.001-5.656l0,0c1.563-1.564,4.096-1.563,5.659,0L241.027,235.366z" />
<path d="M227.7,249.394c1.692,1.419,1.914,3.942,0.493,5.637l0,0c-1.418,1.69-3.943,1.912-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0