gsap+svg实现披萨饼旋转loading加载动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：gsap+svg实现披萨饼旋转loading加载动画效果代码
代码标签： gsap svg 披萨饼 旋转 loading 加载 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #523249;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
.ingredient {
opacity: 0
}
</style>
</head>
<body >
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<g id="pizzaBase">
<circle cx="400" cy="300" r="110.05" fill="#EEB554"/>
<circle cx="400" cy="300" r="99.23" fill="#EDC387"/>
<path d="m425.22,394.11l.93,3.49m-51.36-191.69l-.93-3.49m43.69,197.08l-.63-3.55m-33.83-191.88l-.63-3.55m26.35,200.14l-.31-3.59m-16.98-194.1l-.31-3.59m8.81,198.07v3.61m0-198.45v-3.61m-8.81,201.67l.31-3.59m16.98-194.1l.31-3.59m-26.35,200.14l.63-3.55m33.83-191.88l.63-3.55m-43.69,197.08l.93-3.49m50.43-188.2l.93-3.49m-60.7,192.52l1.23-3.39m66.64-183.09l1.23-3.39m-77.25,186.5l1.52-3.27m82.34-176.59l1.52-3.27m-93.21,179.06l1.8-3.12m97.42-168.74l1.8-3.12m-108.46,170.25l2.07-2.96m111.76-159.61l2.07-2.96m-122.89,160.15l2.32-2.76m125.24-149.26l2.32-2.76m-136.38,148.83l2.55-2.55m137.77-137.77l2.55-2.55m-148.83,136.38l2.76-2.32m149.26-125.24l2.76-2.32m-160.15,122.89l2.96-2.07m159.61-111.76l2.96-2.07m-170.25,108.46l3.12-1.8m168.74-97.42l3.12-1.8m-179.06,93.21l3.27-1.52m176.59-82.34l3.27-1.52m-186.5,77.25l3.39-1.23m183.09-66.64l3.39-1.23m-189.04,59.77l-3.49.93m195.17-52.3l-3.49.93m-193.6,42.76l3.55-.63m191.88-33.83l3.55-.63m-200.14,26.35l3.59-.31m194.1-16.98l3.59-.31m-201.67,8.81h3.61m194.84,0h3.61m-198.08-8.49l-3.59-.31m201.29,17.61l-3.59-.31m-196.54-26.03l3.55.63m191.88,33.83l3.55.63m-193.6-42.76l-3.49-.93m191.69,51.36l3.49.93m-192.52-60.7l3.39,1.23m183.09,66.64l3.39,1.23m-183.23-75.73l-3.27-1.52m183.13,85.39l-3.27-1.52m-175.79-91.69l3.12,1.8m168.74,97.42l3.12,1.8m-170.25-108.46l2.96,2.07m159.61,111.76l2.96,2.07m-160.15-122.89l2.76,2.32m149.26,125.24l2.76,2.32m-146.28-133.83l-2.55-2.55m140.33,140.33l2.55,2.55m-136.38-148.83l2.32,2.76m125.24,149.26l2.32,2.76m-122.89-160.15l2.07,2.96m111.76,159.61l2.07,2.96m-108.46-170.25l1.8,3.12m97.42,168.74l1.8,3.12m-91.69-175.79l-1.52-3.27m83.87,179.86l1.52,3.27m-77.25-186.5l1.23,3.39m66.64,183.09l1.23,3.39" fill="none" opacity=".13" stroke="#AC2804" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
<g id="pepper">
</g>
<g id="ingredientGroup">
<path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
<path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
<path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
<path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
<path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
<path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
<path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
<path class="pepper ingredient" d="m403.43,82.79c-8.17,0-14.77-6.61-14.78-14.77,0-8.16,6.61-14.78,14.78-14.78h1.92s0,6.16,0,6.16h-1.92c-4.77.02-8.61,3.86-8.62,8.62,0,4.76,3.86,8.6,8.62,8.62h1.92s0,6.16,0,6.16h-1.92Z" fill="#78A02A"/>
<path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
<path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
<path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
<path class="mushroom ingredient" d="m404.22,66.3c-.81.2-.88,1.53-.88,2.26,0,2.11,1.41,5.21,1.61,7.74.2,2.52-2.19,3.78-4.9,3.78-.02,0-.06,0-.06,0-.01,0-.03,0-.05,0-2.71,0-5.1-1.26-4.9-3.78.21-2.53,1.61-5.64,1.61-7.74,0-.73-.07-2.06-.87-2.26-1.99.2-1.96.61-1.54,1.24.47.55,1.16,1.29.98,2.24-.11.59-.44,1.06-.9,1.41-1.82,1.88-6.06,1.38-8.26-1.06-.09-.1-.17-.2-.26-.3-.05-.07-.11-.12-.15-.19-.6-.74-.95-1.65-.93-2.71-.03-.51-.02-1.05.1-1.63.52-2.6,1.79-4.97,4.21-6.67,2.1-1.78,5.15-2.61,10.34-2.69.17,0,.33-.01.5-.01.05,0,.09,0,.14,0s.09,0,.14,0c.17,0,.33,0,.5.01,5.19.08,8.25.91,10.34,2.69,2.42,1.7,3.69,4.07,4.21,6.67.11.58.12,1.12.09,1.63.01,1.06-.33,1.97-.93,2.71-.04.07-.1.12-.16.19-.09.1-.16.2-.25.3-2.2,2.44-6.43,2.94-8.26,1.06-.46-.36-.78-.82-.9-1.41-.19-.95.5-1.69.98-2.24.42-.63.45-1.04-1.54-1.24Z" fill="#EBE3CE"/>
<path.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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