gsap实现台球开球动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现台球开球动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.table {
  width: 620px;
  height: 320px;
  background-color: rgba(33, 22, 0, 1);
  background: linear-gradient(
    rgba(238, 196, 135, 0.5) 0%,
    rgba(243, 207, 154, 0.5) 3%,
    rgba(248, 216, 162, 0.5) 6%,
    rgba(243, 207, 154, 0.5) 6%,
    rgba(243, 207, 154, 0.5) 9%,
    rgba(241, 202, 136, 0.5) 12%,
    rgba(243, 207, 154, 0.5) 15%,
    rgba(244, 208, 158, 0.5) 17%,
    rgba(243, 207, 154, 0.5) 19%,
    rgba(243, 207, 154, 0.5) 21%,
    rgba(250, 221, 176, 0.5) 23%,
    rgba(250, 221, 176, 0.5) 25%,
    rgba(243, 207, 154, 0.5) 27%,
    rgba(238, 200, 138, 0.5) 29%,
    rgba(243, 207, 154, 0.5) 29%,
    rgba(243, 207, 154, 0.5) 32%,
    rgba(243, 207, 154, 0.5) 34%,
    rgba(243, 207, 154, 0.5) 37%,
    rgba(250, 221, 176, 0.5) 40%,
    rgba(250, 221, 176, 0.5) 43%,
    rgba(243, 207, 154, 0.5) 43%,
    rgba(243, 207, 154, 0.5) 44%,
    rgba(243, 207, 154, 0.5) 47%,
    rgba(238, 200, 138, 0.5) 49%,
    rgba(243, 207, 154, 0.5) 52%,
    rgba(250, 221, 176, 0.5) 54%,
    rgba(244, 208, 158, 0.5) 56%,
    rgba(243, 207, 154, 0.5) 59%,
    rgba(244, 208, 158, 0.5) 61%,
    rgba(250, 221, 176, 0.5) 64%,
    rgba(243, 207, 154, 0.5) 64%,
    rgba(244, 208, 158, 0.5) 66%,
    rgba(243, 207, 154, 0.5) 69%,
    rgba(248, 216, 162, 0.5) 71%,
    rgba(243, 207, 154, 0.5) 74%,
    rgba(243, 207, 154, 0.5) 76%,
    rgba(243, 207, 154, 0.5) 77%,
    rgba(243, 207, 154, 0.5) 80%,
    rgba(250, 221, 176, 0.5) 81%,
    rgba(243, 207, 154, 0.5) 83%,
    rgba(250, 221, 176, 0.5) 83%,
    rgba(250, 221, 176, 0.5) 85%,
    rgba(243, 207, 154, 0.5) 87%,
    rgba(250, 221, 176, 0.5) 89%,
    rgba(250, 221, 176, 0.5) 91%,
    rgba(243, 207, 154, 0.5) 92%,
    rgba(248, 216, 162, 0.5) 96%,
    rgba(243, 207, 154, 0.5) 97%,
    rgba(243, 207, 154, 0.5) 97%,
    rgba(243, 207, 154, 0.5) 98%,
    rgba(243, 207, 154, 0.5) 100%
  );
  background-size: 500px 20px, 300px 20px, 20px 820px;
  background-position: 50% 50%, 70% 70%, 30% 30%;
  border-radius: 8px;
  position: relative;
}

.shader {
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: #0000004f;
  border-radius: 8px;
}

.table::before {
  content: "";
  z-index: 4;
  position: absolute;
  top: 32px;
  left: 32px;
  background-color: #1e4d0e;
  width: calc(100% - 64px);
  height: calc(100% - 64px);
  box-shadow: inset 0px 0px 34px 1px #006900;
}

.table::after {
  content: "";
  z-index: 6;
  position: absolute;
  top: 43px;
  left: 43px;
  background-color: green;
  width: calc(100% - 86px);
  height: calc(100% - 86px);
  box-shadow: inset 0px 0px 12px 2px rgba(0, 0, 0, 0.4);
}

.pot1 {
  position: absolute;
  top: 22px;
  z-index: 10;
  left: 22px;
  width: 36px;
  height: 36px;
  background-color: black;
  border-radius: 50%;
  box-shadow: inset 2px 2px 0 0 #6f5b40;
}

.pot2 {
  position: absolute;
  top: 16px;
  z-index: 10;
  left: 292px;
  width: 34px;
  height: 34px;
  background-color: black;
  border-radius: 50%;
  box-shadow: inset 0px 3px 0 0 #6f5b40;
}

.pot3 {
  position: absolute;
  top: 22px;
  z-index: 10;
  right: 22px;
  width: 36px;
  height: 36px;
  background-color: black;
  border-radius: 50%;
  box-shadow: inset -2px 2px 0 0 #6f5b40;
}

.pot4 {
  position: absolute;
  bottom: 22px;
  z-index: 10;
  left: 22px;
  width: 36px;
  height: 36px;
  background-color: black;
  border-radius: 50%;
  box-shadow: inset 2px -2px 0 0 #6f5b40;
}

.pot5 {
  position: absolute;
  bottom: 16px;
  z-index: 10;
  left: 292px;
  width: 34px;
  height: 34px;
  background-color: black;
  border-radius: 50%;
  box-shadow: inset 0px -3px 0 0 #6f5b40;
}

.pot6 {
  position: absolute;
  bottom: 22px;
  z-index: 10;
  right: 22px;
  width: 36px;
  height: 36px;
  background-color: black;
  border-radius: 50%;
  box-shadow: inset -2px -2px 0 0 #6f5b40;
}

.cue {
  position: absolute;
  top: 53%;
  left: -220px;
  z-index: 12;
  width: 300px;
  height: 7px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 30%,
    #b9901c 30%,
    #b9901c 96%,
    rgba(255, 255, 255, 0.9) 96%,
    #01579b 100%
  );
  border-radius: 70% 50% 50% 70% / 0% 50% 50% 0%;
}

.cue-ball {
  z-index: 12;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  left: 150px;
  top: 50%;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.ball1 {
  z-index: 12;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  right: 200px;
  top: 50%;
  box-shadow: inset 0px 0px 0px 5px #ffc107, 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
}

.ball1::before {
  content: attr(data-num);
  font-size: 12px;
  width: 100%;
  height: 100%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball2 {
  z-index: 12;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  right: 174px;
  top: 54%;
  box-shadow: inset 0px 0px 0px 5px #2196f3, 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
}

.ball2::before {
  content: attr(data-num);
  font-size: 12px;
  width: 100%;
  height: 100%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball3 {
  z-index: 12;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  right: 174px;
  top: 46%;
  box-shadow: inset 0px 0px 0px 5px #f44336, 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
}

.ball3::before {
  content: attr(data-num);
  font-size: 12px;
  width: 100%;
  height: 100%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball4 {
  z-index: 12;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  right: 150px;
  top: 58%;
  box-shadow: inset 0px 0px 0px 5px #9c27b0, 2px 2px 4px .........完整代码请登录后点击上方下载按钮下载查看