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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0