gsap+svg实现圣诞主题物品变形动画效果代码-html代码-BFW代码库

gsap+svg实现圣诞主题物品变形动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现圣诞主题物品变形动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
         background-color: #1e792c;
         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;
         
        }
    </style>


</head>

<body>
    <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">

<defs>
      <filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
        <feGaussianBlur stdDeviation="12" result="coloredBlur" />
        <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
        <feFlood id="glowAlpha" flood-color="#FFC1C1" flood-opacity="0.5"></feFlood>
        <feComposite in2="offsetblur" operator="in"></feComposite>
        <feMerge>
          <feMergeNode/>          
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>
    <radialGradient id="redGrad" cx="9" cy="9" r="12" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      
      <stop offset="1" stop-color="#c30f16"/>
    </radialGradient>	
	<ellipse cx=0 cy=0 class="dot" rx="2"  fill="red"/>
	<g id="pathContainer">
  <path id="ginger" d="M420.71,229.18a43.2,43.2,0,1,0-49.19,0l-44.69-8.4-8.71,45.31,38.7,7.19v45l-18.6,71.4,44.69,11.7,13.2-51,13.5,51,44.69-11.7-18.6-71.4v-45l38.42-7.19-8.7-45.31Zm-40.19-53.69A7.5,7.5,0,1,1,373,183,7.43,7.43,0,0,1,380..........完整代码请登录后点击上方下载按钮下载查看