gsap+svg实现钻孔运动动画效果代码-html代码-BFW代码库

gsap+svg实现钻孔运动动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现钻孔运动动画效果代码

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

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

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

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss_3.3.3.js"></script>

  
  
</head>

<body translate="no">
  <main class="bg-neutral-900 grid place-items-center h-screen">
  <section class="h-[400px] w-[400px]">
    <svg class="sphere" viewBox="0 0 440 440" stroke="rgba(80,80,80,.35)">
      <defs>
        <linearGradient id="sphereGradient" x1="5%" x2="5%" y1="0%" y2="15%">
          <stop stop-color="#373734" offset="0%" />
          <stop stop-color="#242423" offset="50%" />
          <stop stop-color="#0D0D0C" offset="100%" />
        </linearGradient>
      </defs>
      <path d="M361.604 361.238c-24.407 24.408-51.119 37.27-59.662 28.727-8.542-8.543 4.319-35.255 28.726-59.663 24.408-24.407 51.12-37.269 59.663-28.726 8.542 8.543-4.319 35.255-28.727 59.662z" />
      <path d="M360.72 360.354c-35.879 35.88-75.254 54.677-87.946 41.985-12.692-12.692 6.105-52.067 41.985-87.947 35.879-35.879 75.254-54.676 87.946-41.984 12.692 12.692-6.105 52.067-41.984 87.946z" />
      <path d="M357.185 356.819c-44.91 44.91-94.376 68.258-110.485 52.149-16.11-16.11 7.238-65.575 52.149-110.485 44.91-44.91 94.376-68.259 110.485-52.15 16.11 16.11-7.239 65.576-52.149 110.486z" />
      <path d="M350.998 350.632c-53.21 53.209-111.579 81.107-130.373 62.313-18.794-18.793 9.105-77.163 62.314-130.372 53.209-53.21 111.579-81.108 130.373-62.314 18.794 18.794-9.105 77.164-62.314 130.373z" />
      <path d="M343.043 342.677c-59.8 59.799-125.292 91.26-146.283 70.268-20.99-20.99 10.47-86.483 70.269-146.282 59.799-59.8 125.29.........完整代码请登录后点击上方下载按钮下载查看