vue+gsap实现大气带动画秒表计时器效果代码-html代码-BFW代码库

vue+gsap实现大气带动画秒表计时器效果代码

代码语言：html

所属分类：其他

代码描述：vue+gsap实现大气带动画秒表计时器效果代码，带分段计时和背景圈圈动画效果。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        @import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Share+Tech+Mono&display=swap");
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        
          --white: #e4e4e4;
          --purple: rgba(134, 12, 134, 0.3);
          --blue: rgba(55, 112, 177, 0.3);
          --pink: rgba(170, 61, 125, 0.5);
        }
        
        body {
          min-height: 100vh;
          display: grid;
          place-items: center;
          background-image: linear-gradient(90deg, #1c1822, #2c231f, rgb(28, 24, 34));
          font-family: "Montserrat", sans-serif;
        }
        
        .container {
          width: 375px;
          height: min(667px, 70vh);
          color: var(--white);
          border-radius: 20px;
          padding: 2em;
          display: grid;
          grid-template-rows: 60px 300px 1fr 100px;
          border: 1px solid rgb(141, 141, 141);
          background: radial-gradient(circle at 50% 40%, #2e2e2e, #1e1d20 40%);
          box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
        }
        
        header,
        section,
        nav {
          height: 100%;
          display: grid;
          place-items: center;
        }
        
        header {
          text-align: center;
          font-size: 0.9rem;
        }
        
        section {
          position: relative;
        }
        .timer-visuals {
          position: absolute;
          opacity: 0.7;
        }
        .timer-visuals svg {
          width: 300px;
          height: 300px;
        }
        .timer-visuals circle {
          fill: none;
        }
        .timer-visuals circle:nth-child(1) {
          stroke: var(--purple);
          stroke-width: 6;
        }
        .timer-visuals circle:nth-child(2) {
          stroke: var(--blue);
          stroke-width: 3;
        }
        .timer-visuals circle:nth-child(3) {
          stroke: var(--pink);
          stroke-width: 10;
        }
        .timer-display {
          font-family: "Share Tech Mono";
          font-weight: normal;
          width: 100%;
          position: relative;
          z-index: 1;
        }
        .timer-display h1 {
          font-size: 2.5rem;
          text-align: center;
          letter-spacing: 2px;
        }
        
        .controls {
          height: 100%;
          width: 100%;
          position: relative;
        }
        
        button {
          position: relative;
        }
        .btn {
          width: 60px;
          height: 60px;
          border: none;
          border-radius: 50%;
          background-color: transparent;
          display: grid;
          place-items: center;
          cursor: pointer;
         .........完整代码请登录后点击上方下载按钮下载查看