gsap实现视觉差异鼠标按住汽车仪表盘加速动画效果代码-html代码-BFW代码库

gsap实现视觉差异鼠标按住汽车仪表盘加速动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现视觉差异鼠标按住汽车仪表盘加速动画效果代码

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

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

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

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
    
    html, body, .app {
      width:100%;
      height:100%;
      background:#000;
      overflow:hidden;
      font-family: 'Montserrat', sans-serif;
      font-size:85px;
    }
    
    canvas, svg {
      position:absolute;
      user-select:none;
    }
    
    .app {
      opacity:0;
    }
    </style>
</head>

<body>
    <div class="app">
        <canvas id="c"></canvas>
        <svg id="s" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" stroke="#fff" fill="none">
  <defs>
    <mask id="m1">
      <rect fill="#fff" width="100%" height="100%"/>
      <circle fill="#000" cx="300" cy="300" r="285"/>
    </mask>
    <mask id="m2">
      <rect fill="#fff" width="100%" height="100%"/>
      <circle fill="#000" cx="300" cy="300" r="272"/>
    </mask>    
  </defs>

  <circle class="ring1" cx="300" cy="300" r="210" stroke-width="220" stroke="#000" />  
  
  <g id="marks">
    <path.........完整代码请登录后点击上方下载按钮下载查看