gsap+svg实现小熊气球漂浮击落小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：gsap+svg实现小熊气球漂浮击落小游戏代码，看看你能击落多少个小熊气球。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
<style>
@import "normalize.css";

* {
  box-sizing: border-box;
}

:root {
  --digit: hsl(0 0% 100% / 0.8);
}

body {
  display: grid;
  min-height: 100vh;
  place-items: center;
  counter-reset: popped 0;
  overflow: hidden;
  background: hsl(210 80% 90%);
  font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
    Helvetica, Arial, sans-serif, system-ui;
  font-weight: bold;
}

@media(prefers-color-scheme: dark) {
  body {
    background: hsl(210 30% 15%);
  }
}

.pop-counter {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--digit);
  font-family: sans-serif, system-ui;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
}

main [popover]:not(#results, #level0):popover-open {
  counter-increment: popped 1;
}
main [popover]:not(#results) :checked {
  counter-increment: popped 1;
}

.pops:after {
  content: counter(popped);
  font-size: 1.25rem;
  color: transparent;
}
main:after {
  content: counter(popped);
  top: 1rem;
  left: calc(50% + 2.5rem);
  top: anchor(--status top);
  right: anchor(--status center);
  position: fixed;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--digit);
  font-family: sans-serif, system-ui;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  z-index: 2;
  opacity: var(--playing, 0);
  transition: opacity 0.2s;
}

[role=image] {
  display: inline-block;
  translate: -50% 0;
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: linear-gradient(hsl(0 0% 15%), hsl(0 0% 15%)) padding-box, linear-gradient(hsl(0 0% 35%), hsl(0 0% 0%)) border-box;
  color: hsl(0 0% 100% / 0.8);
  padding: 2rem;
  display: grid;
  place-items: center;
  transition: transform 0.25s;
  transform: translateY(calc(var(--hide, 0) * 100vh));
  border: solid transparent 4px;
  border-radius: 0.5rem;
  width: 70ch;
  max-width: 100%;
}

.dialog-bear {
  width: 100%;
  height: 100%;
}
.intro-bear {
  height: 100%;
  width: clamp(250px, 20vmin + 1rem, 30rem);
}

.dialog--intro {
  display: grid;
  grid-template-columns: auto 1fr;
}

.score:after {
  content: "You popped "counter(popped)" balloons!";
  font-size: 1.5rem;
}

.intro {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.dialog button {
  border: 4px solid white;
  background: transparent;
  padding: 1rem 2rem;
  border-radius: 100px;
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
  transition: background 0.2s;
  cursor: pointer;
}

h1 {
  font-size: 4rem;
  color: white;
  line-height: 1;
  margin: 0;
}

.dialog p {
  font-size: 1.25rem;
  margin: 0;
  font-weight: 300;
}

.dialog button:hover {
  background: hsl(0 90% 50%);
}

.dialog--result {
  display: grid;
  gap: 1rem;
  padding: 2rem 4rem;
}

.dialog--result h2 {
  font-size: 3rem;
  margin: 0;
}

#result:popover-open .dialog--result {
  --hide: 0;
  -webkit-animation: pop-up 0.25s both;
          animation: pop-up 0.25s both;
}

@-webkit-keyframes pop-up {
  from {
    transform: translateY(100vh);
  }
}

@keyframes pop-up {
  from {
    transform: translateY(100vh);
  }
}

:root:has(#level0:popover-open) .dialog--intro {
  --hide: 1;
}

[popover] {
  inset: unset;
  position: fixed;
  height: 100vh;
  width: 100vw;
  inset: 0;
  top: 0;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.bear {
  --hue: 280;
  position: absolute;
  top: 100%;
  left: calc(var(--x, 0) * 1%);
  width: calc(var(--size, 0) * 1%);
  translate: -50% 0;
  min-width: 48px;
  aspect-ratio: 1;
  transform: rotateY(calc(var(--flip, 0) * 180deg));
  -webkit-animation: float calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite linear;
          animation: float calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite linear;
}

.bear button {
  background: transparent;
  border: 0;
}

@-webkit-keyframes float {
  to {
    translate: -50% calc(-100vh - 600%);
  }
}

@keyframes float {
  to {
    translate: -50% calc(-100vh - 600%);
  }
}

.bear--golden .bear__fur {
  fill: hsl(45 90% 70%);
}

.bear__balloon {
  fill: hsl(var(--hue, 10) 80% 80% / var(--alpha, 0.65));
  transition: fill 0.2s;
}

.bear__strap {
  fill: hsl(var(--hue, 10) 100% 50%);
}

.bear [type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.bear svg {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: 0;
  width: 254%;
  left: 50%;
  translate: -47.5% -9%;
}

.bear :is(button, label) {
  width: 100%;
  aspect-ratio: 1;
  opacity: 1;
  padding: 0;
  border-radius: 50%;
  display: block;
  cursor: pointer;
  position: absolute;
  z-index: 2;
} 

[popover]:has(~ [popover]:popover-open) .bear:has(button) .bear__content {
  pointer-events: none;
  -webkit-animation: drop 1s forwards, eliminate 1s steps(1, end) both;
          animation: drop 1s forwards, eliminate 1s steps(1, end) both;
}

[popover]:has(~ [popover]:popover-open) .bear:has(button) .bear__balloon {
  pointer-events: none;
  -webkit-animation: pop 0.2s forwards;
          animation: pop 0.2s forwards;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.bear button {
  border: 0;
}

.bear__content {
  height: 100%;
  width: 100%;
}

.bear:has(:checked) .bear__content {
  pointer-events: none;
  -webkit-animation: drop 1s forwards, eliminate 1s steps(1, end) both;
          animation: drop 1s forwards, eliminate 1s steps(1, end) both;
}

.bear:has(:checked) .bear__balloon {
  -webkit-animation: pop 0.2s forwards;
          animation: pop 0.2s forwards;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@-webkit-keyframes pop {
  to {
    scale: 1.5;
    opacity: 0;
  }
}

@keyframes pop {
  to {
    scale: 1.5;
    opacity: 0;
  }
}


@-webkit-keyframes drop {
  to {
    translate: 0% calc(100vh + 600%);
  }
}


@keyframes drop {
  to {
    translate: 0% calc(100vh + 600%);
  }
}
@-webkit-keyframes eliminate {
  to {
    opacity: 0;
  }
}
@keyframes eliminate {
  to {
    opacity: 0;
  }
}

.bear:has(:is(label, button):hover) {
  --alpha: 1;
}

[popover]:has(+ [popover] + [popover]:popover-open) .bear {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}

[id*=level]:has(+ [popover]:not(#result):popover-open) .bear:not(:has(:checked)):not(:has(button)) .bear__content {
  -webkit-animation: fade-away 0.5s both;
          animation: fade-away 0.5s both;
}

@-webkit-keyframes fade-away {
  to {
    opacity: 0;
  }
}

@keyframes fade-away {
  to {
    opacity: 0;
  }
}

.bear__eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  rotate: 45deg;
  -webkit-animation: blink calc(var(--blink-speed, 6) * 1s) calc(var(--blink-delay, 2) * -1s) infinite;
          animation: blink calc(var(--blink-speed, 6) * 1s) calc(var(--blink-delay, 2) * -1s) infinite;
}

@-webkit-keyframes blink {
  0%, 46%, 48%, 50%, 100% {
    scale: 1 1;
  }
  47%, 49% {
    scale: 1 0.01;
  }
}

@keyframes blink {
  0%, 46%, 48%, 50%, 100% {
    scale: 1 1;
  }
  47%, 49% {
    scale: 1 0.01;
  }
}

.backdrop,
.backdrop > div {
  height: 100%;
  width: 100%;
  position: fixed;
  inset: 0;
}
.cloud {
  position: absolute;
  top: 100%;
  left: calc(var(--x, 0.5) * 1%);
  translate: -50% 0;
  transform: rotateY(calc(var(--flipped, 0) * 180deg));
  width: calc(var(--size) * 1vmin);
  animation: fluff calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * 1s) linear reverse infinite;
}

.cloud path {
  fill: hsl(0 0% calc(var(--shade, 90) * 1%));
}

@media(prefers-color-scheme: dark) {
  .cloud path {
    fill: hsl(0 0% calc((var(--shade, 90) - 20) * 1%));
  } 
}

@-webkit-keyframes fluff {
  to {
    translate: -50% calc(-100vh + -100%);
  }
}

@keyframes fluff {
  to {
    translate: -50% calc(-100vh + -100%);
  }
}

.wave-header {
  font-size: 3rem;
  text-transform: uppercase;
  background: hsl(10 80% 50%);
  padding: 1rem;
  position: absolute;
  bottom: 4rem;
  left: 0;
  width: 50vw;
  transform: skewX(-10deg);
  color: hsl(0 0% 100%);
  text-align: right;
  margin: 0;
  translate: -110% 0;
  -webkit-animation: wave 4s both;
          animation: wave 4s both;
}

@-webkit-keyframes wave {
  to {
    translate: calc(100vw + 100%) 0;
  }
}

@keyframes wave {
  to {
    translate: calc(100vw + 100%) 0;
  }
}


/* Timer magic... */
.timer {
  color: var(--digit, red);
  display: inline-flex;
  font-size: 6vmin;
  padding: 1.75vmin;
  border-radius: 12px;
  background: hsl(0 0% 0%);
}

.game-status {
  anchor-name: --status;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: black;
  position: absolute;
  top: 1rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  opacity: var(--playing, 0);
  transition: opacity 0.2s;
  border-radius: 6px;
}

main > .game-status .timer {
  font-size: 1.25rem;
  padding: 0.5rem;
  border-radius: 6px;
}
main > .game-status .timer .ms {
  font-size: 0.75rem;
}

@property --ms-tens {
  initial-value: 0;
  inherits: true;
  syntax: '<number>';
}
@property --ms-singles {
  initial-value: 0;
  inherits: true;
  syntax: '<number>';
}
@property --s-tens {
  initial-value: 0;
  inherits: true;
  syntax: '<number>';
}
@property --s-singles {
  initial-value: 0;
  inherits: true;
  syntax: '<number>';
}
@property --m-tens {
  initial-value: 0;
  inherits: true;
  syntax: '<number>';
}
@property --m-singles {
  initial-value: 0;
  inherits: true;
  syntax: '<number>';
}

#result {
  display: block;
  translate: 0 100%;
}

#result:popover-open {
  translate: 0 0;
}

.digit {
  position: relative;
  color: transparent;
  font-family: 'Orbitron', sans-serif;
  counter-reset: var(--counter-name) var(--counter-variable);
  -webkit-animation: var(--name, none) var(--duration, 1s) infinite steps(var(--steps)) var(--state);
          animation: var(--name, none) var(--duration, 1s) infinite steps(var(--steps)) var(--state);
}
.digit:after {
  content: counter(var(--counter-name));
  font-variant: tabular-nums;
  color: var(--digit, red);
  position: absolute;
  bottom: 0;
  right: 0;
}
:root:has(#level0:popover-open) {
  --state: running;
  --playing: 1;
}
:root:has(#result:popover-open) {
  --state: paused;
  --playing: 0;
}
:root:has(#level0:popover-open) .ms--tens {
  --name: ms-tens;
}
:root:has(#level0:popover-open) .ms--singles {
  --name: ms-singles;
}
:root:has(#level0:popover-open) .s--tens {
  --name: s-tens;
}
:root:has(#level0:popover-open) .s--singles {
  --name: s-singles;
}
:root:has(#level0:popover-open) .m--tens {
  --name: m-tens;
}
:root:has(#level0:popover-open) .m--singles {
  --name: m-singles;
}
.game-timer {
  font-size: 3vmin;
  padding: 1vmin;
}
.game-timer .ms {
  font-size: 2vmin;
}
.ms {
  font-size: 4vmin;
  transform: translate(0, -6%);
}
.ms--tens {
  --duration: 1s;
  --steps: 10;
  --counter-name: ms-tens;
  --counter-variable: var(--ms-tens);
}
.ms--singles {
  --duration: 0.1s;
  --steps: 10;
  --counter-name: ms-singles;
  --counter-variable: var(--ms-singles);
}
.s--tens {
  --duration: 60s;
  --steps: 6;
  --counter-name: s-tens;
  --counter-variable: var(--s-tens);
}
.s--singles {
  --duration: 10s;
  --steps: 10;
  --counter-name: s-singles;
  --counter-variable: var(--s-singles);
}
.m--tens {
  --duration: 3600s;
  --steps: 6;
  --counter-name: m-tens;
  --counter-variable: var(--m-tens);
}
.m--singles {
  --duration: 600s;
  --steps: 10;
  --counter-name: m-singles;
  --counter-variable: var(--m-singles);
}
@-webkit-keyframes ms-tens {
  to {
    --ms-tens: 10;
  }
}
@keyframes ms-tens {
  to {
    --ms-tens: 10;
  }
}
@-webkit-keyframes ms-singles {
  to {
    --ms-singles: 10;
  }
}
@keyframes ms-singles {
  to {
    --ms-singles: 10;
  }
}
@-webkit-keyframes s-tens {
  to {
    --s-tens: 6;
  }
}
@keyframes s-tens {
  to {
    --s-tens: 6;
  }
}
@-webkit-keyframes s-singles {
  to {
    --s-singles: 10;
  }
}
@keyframes s-singles {
  to {
    --s-singles: 10;
  }
}
@-webkit-keyframes m-tens {
  to {
    --m-tens: 6;
  }
}
@keyframes m-tens {
  to {
    --m-tens: 6;
  }
}
@-webkit-keyframes m-singles {
  to {
    --m-singles: 10;
  }
}
@keyframes m-singles {
  to {
    --m-singles: 10;
  }
}
</style>

  
</head>

<body translate="no">
  <main>
      <div class="game-status">
        <div class="timer">
          <div class="digit second m m--tens">0</div>
          <div class="digit second m m--singles">0</div>
          <span>:</span>
          <div class="digit second s s--tens">0</div>
          <div class="digit second s s--singles">0</div>
          <span>:</span>
          <div class="digit digit--small ms ms--tens">0</div>
          <div class="digit digit--small ms ms--singles">0</div>
        </div>
        <div class="pop-counter">
          <span role="image">🎈</span>
          <div class="pops"></div>
        </div>
      </div>
      <div class="backdrop"></div>
      <form action="#">
        <div class="dialog dialog--intro">
          <div class="intro">
            <h1>Poppin' Bears!</h1>
            <p>
              You gotta find and pop the golden bear's balloon to progress! How
              long will it take you? How many balloons can you pop?
            </p>
            <p>┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴</p>
            <button type="button" popovertarget="level0">Start</button>
          </div>
          <div class="intro-bear">
            <svg
              class="dialog-bear"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 885 1059"
            >
              <rect
                width="115"
                height="52"
                x="527.5"
                y="961.5"
                fill="#AF7128"
                stroke="#000"
                stroke-width="6"
                rx="26"
                transform="rotate(-90 527.5 961.5)"
              />
              <path
                fill="#000"
                d="M551.674 948.205a3 3 0 1 0-6 0h6Zm0 12v-12h-6v12h6ZM564.34 948.205a3 3 0 0 0-6 0h6Zm0 12v-12h-6v12h6Z"
              />
              <path
                fill="#AF7128"
                d="M505.653 673.433c-8.572-14.183-6.748-32.879 5.479-45.106 14.388-14.387 37.731-14.37 52.14.038 10.153 10.153 13.16 24.742 9.017 37.509 13.071 3.917 25.39 11.04 35.718 21.369l14.163 14.162c10.282 10.283 17.388 22.537 21.316 35.542 12.744-4.098 27.287-1.081 37.415 9.048 14.409 14.408 14.426 37.752.039 52.14-12.179 12.178-30.774 14.036-44.935 5.581a84.968 84.968 0 0 1-13.747 17.985l-47.065 47.066-77.583 77.583a36.986 36.986 0 0 0-5.206 6.541l-15.761 25.197c-3.205 5.125-6.75 10.464-12.384 12.655-7.889 3.068-17.198 1.412-23.575-4.965l-13.115-11.847-7.404-6.859-9.004-9.24c-8.605-8.604-5.835-20.208-1.016-30.609l13.314-23.061c-2.048-1.407-4.711-4.694-6.52-6.503-1.563-1.563-3.05-4.787-4.312-6.531L397.298 912.3c-6.512 8.418-20.24 9.852-28.844 1.247l-26.204-25.523c-8.604-8.604-15.463-21.052-4.977-36.77l46.35-60.011a29.027 29.027 0 0 1-1.286-8.551l-.046-63.046c-.012-16.028 12.972-29.012 29-29 16.028.012 29.03 13.014 29.042 29.042l.011 14.834 47.367-47.367a84.962 84.962 0 0 1 17.942-13.722Z"
              />
              <path
                stroke="#000"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="6"
                d="m575.193 868.767 47.065-47.066a84.968 84.968 0 0 0 13.747-17.985c14.161 8.455 32.756 6.597 44.935-5.581 14.387-14.388 14.37-37.732-.039-52.14-10.128-10.129-24.671-13.146-37.415-9.048-3.928-13.005-11.034-25.259-21.316-35.542l-14.163-14.162c-10.328-10.329-22.647-17.452-35.718-21.369 4.143-12.767 1.136-27.356-9.017-37.509-14.409-14.408-37.752-14.425-52.14-.038-12.227 12.227-14.051 30.923-5.479 45.106a84.962 84.962 0 0 0-17.942 13.722l-47.367 47.367-.011-14.834c-.012-16.028-13.014-29.03-29.042-29.042-16.028-.012-29.012 12.972-29 29l.046 63.046a29.027 29.027 0 0 0 1.286 8.551l-46.35 60.011c-10.486 15.718-3.627 28.166 4.977 36.77l26.204 25.523c8.604 8.605 22.332 7.171 28.844-1.247l15.329-21.172c1.262 1.744 2.749 4.968 4.312 6.531 1.809 1.809 4.472 5.096 6.52 6.503l-13.314 23.061c-4.819 10.401-7.589 22.005 1.016 30.609l9.004 9.24 7.404 6.859 13.115 11.847c6.377 6.377 15.685 8.033 23.575 4.965 5.634-2.191 9.179-7.53 12.384-12.655l15.761-25.197a36.986 36.986 0 0 1 5.206-6.541l39.815-39.815"
              />
              <path
                fill="#000"
                d="M411.783 705.187a3.005 3.005 0 0 0 3.002 3.002 2.994 2.994 0 0 0 2.998-2.997l-6-.005Zm-.009-12.009.009 12.009 6 .005-.009-12.009-6-.005ZM399.676 705.178a3.006 3.006 0 0 0 3.002 3.003 2.995 2.995 0 0 0 2.998-2.998l-6-.005Zm-.009-12.008.009 12.008 6 .005-.009-12.009-6-.004Z"
              />
              <path
                fill="#FF1E1E"
                d="m541.738 702.92 62.579 62.579-9.37 9.37-62.578-62.58z"
              />
              <path
                fill="#000"
                fill-rule="evenodd"
                d="M650.156 753.094c2.526 22.882-6.427 46.109-20.821 60.503l-43.655-43.655c9.604-9.727 9.566-25.397-.114-35.077l-13.194-13.194c-9.68-9.68-25.35-9.718-35.077-.114l-43.44-43.44c14.394-14.394 37.621-23.347 60.503-20.821 22.881 2.525 45.829 14.037 63.795 32.003s29.478 40.914 32.003 63.795Z"
                clip-rule="evenodd"
              />
              <ellipse
                cx="582.096"
                cy="803.26"
                fill="#000"
                rx="8.091"
                ry="8.079"
                transform="rotate(45 582.096 803.26)"
              />
              <ellipse
                cx="505.202"
                cy="726.366"
                fill="#000"
                rx="8.091"
                ry="8.079"
                transform="rotate(45 505.202 726.366)"
              />
              <path
                fill="#000"
                d="M548.047 789.863c-5.806 5.806-19.328 5.352-27.101-2.421s-8.227-21.295-2.421-27.101c5.805-5.805 15.671-1.695 23.444 6.078 7.773 7.773 11.883 17.639 6.078 23.444Z"
              />
              <path
                stroke="#000"
                stroke-linecap="round"
                stroke-width="6"
                d="m430.374 955.873-8.486 8.485M447.369 972.869l-8.485 8.485M357.435 882.935l-8.485 8.485M374.43 899.93l-8.485 8.485M426.5 821.5l-5-376"
              />
              <circle
                cx="421.5"
                cy="273.5"
                r="169"
                fill="#FF1E1E"
                stroke="#000"
                stroke-width="6"
              />
              <path
                fill="#F20000"
                fill-opacity=".5"
                stroke="#000"
                stroke-linejoin="round"
                stroke-width="6"
    .........完整代码请登录后点击上方下载按钮下载查看