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