TweenMax+svg卡通太阳点击发光动画效果代码

代码语言:html

所属分类:动画

代码描述:TweenMax+svg卡通太阳点击发光动画效果代码

代码标签: TweenMax svg 卡通 太阳 点击 发光 动画

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
body {
  background-color: #aad4f9;
}
svg {
  position: fixed;
  top: 30%;
  height: 40%;
  left: 20%;
  width: 60%;
  cursor: pointer;
  visibility: none;
}
</style>


  
  
</head>

<body>
  <div class="container">

  <svg width="645.112832px" height="656.01433px" viewBox="0 0 645.112832 656.01433" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="sun" transform="translate(-137.898128, -127.000000)">
        <g transform="translate(137.898128, 127.000000)">
          <g id="glow-rotate">
            <path d="M546.600516,406.275319 L637.164068,343.330802 C647.76242,335.958605 647.76242,320.055724 637.164068,312.683528 L546.600516,249.739011 C537.831847,243.642321 533.447513,232.864872 535.403777,222.251249 L555.668379,112.627856 C558.038911,99.7908723 546.980262,88.545347 534.3566,90.9559383 L426.554904,111.562983 C416.117656,113.564008 405.519304,109.093882 399.523927,100.177035 L337.625408,8.08308699 C330.375721,-2.69436233 314.737111,-2.69436233 307.487424,8.08308699 L245.588905,100.177035 C239.593528,109.093882 228.995176,113.552306 218.557928,111.562983 L110.756232,90.9559383 C98.1325702,88.545347 87.0739205,99.7908723 89.4444531,112.627856 L109.709055,222.251249 C111.676827,232.864872 107.280985,243.642321 98.5123157,249.739011 L7.94876408,312.683528 C-2.64958803,320.055724 -2.64958803,335.958605 7.94876408,343.330802 L98.5123157,406.275319 C107.280985,412.372008 111.665319,423.149458 109.709055,433.76308 L89.4444531,543.386474 C87.0739205,556.223457 98.1325702,567.468983 110.756232,565.058391 L218.557928,544.451346 C228.995176,542.450322 239.593528,546.920447 245.588905,555.837295 L307.487424,647.931243 C314.737111,658.708692 330.375721,658.708692 337.625408,647.931243 L399.523927,555.837295 C405.519304,546.920447 416.117656,542.462024 426.554904,544.451346 L534.3566,565.058391 C546.980262,567.468983 558.038911,556.223457 555.668379,543.386474 L535.403777,433.76308 C533.447513,423.16116 537.843355,412.372008 546.600516,406.275319 Z" id="sun-rays" fill="#F7D88B" fill-rule="nonzero"></path>
            <line x1="435.306294" y1="75.6439198" x2="455.444314" y2="23.5704676" id="line-8" stroke="#EF9067" stroke-width="37" stroke-linecap="round"></line>
            <line x1="576.865014" y1="225.149221" x2="627.31363" y2="202.810295" id="line-7" stroke="#EF9067" stroke-width="37" stroke-linecap="round"></line>
            <line x1="576.572704" y1="436.359663" x2="627.101872" y2="458.511358" id="line-6" stroke="#EF9067" stroke-width="37" stroke-linecap="round"></line>
            <line x1="424.404125" y1="581.930051" x2="446.383335" y2="633.231178" id="line-5" stroke="#EF9067" stroke-width="37" stroke-linecap="round"></line>
            <line x1="192.201372" y1="634" x2="212.339391" y2="581.926548" id="line-4" stroke="#EF9067" stroke-width="37" stroke-linecap="round"></line>
            <line x1="14.1018721" y1="453.866729" x2="66.2305747" y2="435.951121" id="line-3" stroke="#EF9067" stroke-width="37" stroke-linecap="round"></line>
            <line x1="63.0348787" y1="218.237498" x2="17.3273276" y2="187.07534" id="line-2" stroke="#EF9067" stroke-width="37" stroke-linecap="round"></line>
            <line x1="215.8307" y1="76.2076605" x2="188.327919" y2="27.7500953" id="line-1" stroke=&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0