gsap实现冒烟的房子动画效果代码-html代码-BFW代码库

gsap实现冒烟的房子动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现冒烟的房子动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
 background-color: #1c1c1c;
 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: 60%;
 height: 60%;
 visibility: hidden;
 
}
</style>


</head>

<body >
  <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
    <linearGradient id="grad1" x1="393.05" y1="691.01" x2="393.05" y2="347.71" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#35AAF9"/>
      <stop offset="1" stop-color="#993BDC"/>
    </linearGradient>	

<g >
	 
    <g id="fat" stroke="url(#grad1)" fill="none"  stroke-linecap="round" stroke-miterlimit="10" stroke-width="3">
           <path d="M317.22,282.27l61.2-.06h-.18" fill="none" />
        <line x1="292.81" y1="273.67" x2="402.65" y2="273.56" fill="none" />
        <line x1="277.56" y1="264.52" x2="417.9" y2="264.38" fill="none" />
        <line x1="265.97" y1="255.37" x2="429.5" y2="255.21" fill="none" />
        <line x1="256.81" y1="246.21" x2="438.65" y2="246.04" fill="none" />
        <line x1="248.88" y1="237.06" x2="446.58" y2="236.88" fill="none" />
        <line x1="242.78" y1="227.91" x2="452.68" y2="227.71" fill="none" />
        <line x1="237.9" y1="218.75" x2="457.57" y2="218.55" fill="none" />
        <line x1="233.63" y1="209.6" x2="461.84" y2="209.38" fill="none" />
        <line x1="230.57" y1="200.45" x2="464.89" y2="200.23" fill="none" />
        <line x1="228.13" y1="191.29" x2="467.33" y2="191.06" fill="none" />
        <line x1="226.3" y1="182.14" x2="469.16" y2="181.91" fill="none" />
        <line x1="225.08" y1="172.99" x2="470.38" y2="172.76" fill="none" />
        <line x1="225.08" y1="163.84" x2="470.38" y2="163.6" fill="none" />
        <line x1="225.08" y1="154.68" x2="470.38" y2="154.45" fill="none" />
        <line x1="226.3" y1="145.53" x2="469.16" y2="145.3" fill="none" />
        <line x1="228.13" y1="136.38" x2="467.33" y2="136.15" fill="none" />
        <line x1="230.57" y1="127.22" x2="464.89" y2="127" fill="none" />
        <line x1="233.63" y1="118.07" x2="461.84" y2="117.85" fill="none" />
        <line x1="237.9" y1="108.92" x2="457.57" y2="108.71" fill="none" />
        <line x1="242.78" y1="99.77" x2="452.68" y2="99.57" fill="none" />
        <line x1="248.88" y1="90.61" x2="446.58" y2="90.43" fill="none" />
        <line x1="256.81" y1="81.46" x2="438.65.........完整代码请登录后点击上方下载按钮下载查看