js实现自适应打台球小球撞击乱碰物理动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现自适应打台球小球撞击乱碰物理动画效果代码，点击台球桌任意位置驱动白球撞击

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

<html>

<head>
    <style>
        html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }
        
        body {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: #3F4D63;
          background: repeating-conic-gradient(from 45deg, #3F4D63 0deg 90deg, #495973 90deg 180deg);
          background-size: 50px 50px;
          animation: scrollBackground;
          animation-duration: 5s;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
        
        @keyframes scrollBackground  {
          0% {
            background-position: 0px 0px;
          }
          
          100% {
            background-position: 50px 50px;
          }
        }
        
        h1 {
          color: white;
          font-family: sans-serif;
          font-weight: 100;
          font-size: 1.5em;
          text-shadow: 4px 4px rgba(0, 0, 0, 0.5);
          margin-top: 0;
          margin-bottom: 12px;
        }
        
        .pool-table-border {
          border: 20px solid #7B373B;
          box-shadow: 8px 8px rgba(0, 0, 0, 0.5);
          border-radius: 8px;
        }
        .pool-table-field {
          position: relative;
          width: 600px;
          height: 300px;
          background: #387D7A;
          box-shadow: 6px 6px rgba(0, 0, 0, 0.5) inset;
          background: repeating-conic-gradient(from 45deg, #387D7A 0deg 90deg, #456B7A 90deg 180deg);
          background-size: 50px 50px;
        }
        
        .ball {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          height: 20px;
          position: absolute;
          transform: translate(-10px, -10px);
          border-radius: 10px;
          box-shadow: 3px 3px rgba(0, 0, 0, 0.5);
        }
        .ball-number {
          text-align: center;
          width: 12px;
          height: 12px;
          background: white;
          border-radius: 10px;
          font-family: sans-serif;
          font-size: 8px;
          line-height: 12px;
          font-weight: bold;
        }
        .ball-white {
          background: white;
          top: 150px;
          left: 150px;
        }
        .ball-red {
          background: red;
          top: 150px;
          left: 400px;
        }
        .ball-yellow-striped {
          background: linear-gradient(0deg, #FFFFFF 10%, #E9C46A 10%, #E9C46A 90%, #FFFFFF 90%);
          top: 140px;
          left: 420px;
        }
        .ball-green-striped {
          background: linear-gradient(0deg, #FFFFFF 10%, #2A9D8F 10%, #2A9D8F 90%, #FFFFFF 90%);
          top: 160px;
          left: 420px;
        }
        .ball-brown-striped {
          background: linear-gradient(0deg, #FFFFFF 10%, #7F4F24 10%, #7F4F24 90%, #FFFFFF 90%);
          top: 130px;
          left: 440px;
        }
        .ball-black {
          background: black;
          top: 150px;
          left: 440px;
        }
        .ball-purple-striped {
          background: linear-gradient(0deg, #FFFFFF 10%, purple 10%, purple 90%, #FFFFFF 90%);
          top: 170px;
          left: 440px;
        }
        .ball-blue-striped {
          background: linear-gradient(0deg, #FFFFFF 10%, #0096C7 10%, #0096C7 90%, #FFFFFF 90%);
          top: 120px;
          left: 460px;
        }
        .ball-orange {
          background: #F4A261;
          top: 140px;
          left: 460px;
        }
        .ball-green {
          background: #2A9D8F;
          top: 160px;
          left: 460px;
        }
        .ball-blue {
          background: #0096C7;
          top: 180px;
          left: 460px;
        }
        .ball-orange-striped {
          background: linear-gradient(0deg, #FFFFFF 10%, #F4A261 10%, #F4A261 90%, #FFFFFF 90%);
          top: 110px;
          left: 480px;
        }
        .ball-yellow {
          background: #E9C46A;
          top: 130px;
          left: 480px;
        }
        .ball-purple {
          background: purple;
          top: 150px;
          left: 480px;
        }
        .ball-red-striped {
          background: linear-gradient(0deg, #FFFFFF 10%, red 10%, red 90%, #FFFFFF 90%);
          top: 170px;
          left: 480px;
        }
        .ball-brown {
          background: #7F4F24;
          top: 190px;
          left: 480px;
        }
        
        @media screen and (max-width: 768px) {
          h1 {
            transform: translateY(-80px);
          }
          .pool-table-border {
            transform: rotate(-90deg) scale(0.75, 0.75);
          }
        }
    </style>

</head>

<body>
    <h1>Click the table to shoot!</h1>

    <div class="pool-table-border">
        <div class="pool-table-field">
            <div class="ball ball-white"></div>

            <div class="ball ball-red"><span class="ball-number">3</span></div>
            <div class="ball ball-yellow-striped"><span class="ball-number">9</span></div>
            <div class="ball ball-green-striped"><span class="ball-number">14</.........完整代码请登录后点击上方下载按钮下载查看