gsap实现质感旋钮转动动画效果代码-html代码-BFW代码库

gsap实现质感旋钮转动动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现质感旋钮转动动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
html, body, .stage, .container, svg {
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
}

* {
  position:absolute;
}
</style>



</head>

<body translate="no" >
  <div class="stage">
  <div class="container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,200,200">
      
      <defs>
        <mask id="m1">
          <polygon fill="#fff" points="200,20 0,20 0,35 100,188 200,35" />
        </mask>
        
     
        
        <polygon id="t1" class="top" points="100,-90 0,35 50,35" />
        <polygon id="t2" class="top" points="100,-90 50,35 100,35" />
        <polygon id="t3" class="top" points="100,-90 100,35 150,35" />
        <polygon id="t4" class="top" points="100,-90 150,35 200,35" />    
        <polygon id="t5" class="top" points="100,-90 200,35 200,35" />
        
        <polygon id="b1" class="bottom" points="100,190 0,35 50,35" />
        <polygon id="b2" class="bottom" points="100,190 50,35 100,35" />
        <polygon id="b3" class="bottom" points="100,190 100,35 150,35" />    
        <polygon id="b4" class="bottom" points="100,190 150,35 200,35" />        
        <polygon id="b5" class="bottom" points="100,190 200,35 200,35" />
        
      </defs>
      
      <g mask="url(#m1)">
        <use class="topFill" fill="hsl(170, 100%, 50%)" href="#t1" />
        <use class="topFill" fill="hsl(175, 100%, 40%)" href="#t2" />
        <use class="topFill" fill="hsl(180, 100%, 30%)" href="#t3" />
        <use class="topFill" fill="hsl(185, 100%, 20%)" href="#t4" />
        <use class="topFill" fill="hsl(190, 100%, 10%)" href="#t5" />
        <use class="bottomFill" fill="hsl(200, 100%, 15%)" href="#b1" />
        <use class="bottomFill" fill="hsl(195, 100%, 20%)" href="#b2" />
        <use class="bottomFill" fill="hsl(190, 100%, 25%)" href="#b3" />    
        <use class="bottomFill" fill="hsl(185, 100%, 30%)" href="#b4" />        
        <use class="bottomFill" fill="hsl(180, 100%, 35%)" href="#b5" />

        <g mask="url(#m2)" stroke="#fff" fill="none" >
          <use class="topStroke" href="#t2" />
          <use class="topStroke" href=&qu.........完整代码请登录后点击上方下载按钮下载查看