前端：篮球投掷动画

懒羊羊大王呀

于 2024-08-23 20:39:24 发布

阅读量344

点赞数 16

分类专栏： css3 文章标签：前端 css html5

本文链接：https://blog.csdn.net/m0_73777400/article/details/141474279

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

篮球投掷动画

使用 H5 和 CSS3 实现的一个篮球投掷动画。
玩法：通过点击篮球所在的绿色(紫色)容器，实现篮球的投掷和回收。

亮点：

使用复选框和伪类选择器代替 JS 实现按钮控制效果。
使用多重渐变完成背景的绘制。

演示视频如下：

篮球投掷动画

源代码如下：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>投篮机</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: #03a9f4;
      font-family: "sans-serif";
      width: 100%;
      height: 100%vh;
    }
	
	/* 最大的容器 */
    .container {
      position: relative;
      margin: 0px auto;
      margin-top: 350px;
      width: 350px;
      height: 200px;
      text-align: center;
      display: fles;
    }

    /* 篮筐下面的地面 */
    .container::after {
      content: "";
      position: absolute;
      bottom: 143px;
      left: 0;
      width: 100%;
      height: 5px;
      border-radius: 2px;
      background-color: rgb(128, 128, 128, 0.7);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 3px 10px 0 rgba(0, 0, 0, 0.2);
    }

    /* 左侧篮筐容器 */
    .left-container {
      position: relative;
      float: left;
      width: 120px;
    }

    /* 篮球的容器 */
    .groove {
      width: 120px;
      height: 50px;
      background-color: purple;
      border-radius: 25px;
      padding: 2px;
    }

    /* 投球的触发器 */
    .trigger {
      position: absolute;
      /* 有内边距,这里是想与内容区对齐 */
      left: 2px;
      top: 2px;
      width: 120px;
      height: 50px;
      opacity: 0;
    }


    /* 复选框选中就改变颜色 */
    .trigger:checked+.groove {
      background-color: purple;

    }

    /* 复选框选中就投球 */
    .trigger:checked+.groove .ball {
      animation: ball 2s linear forwards;
    }

    /* 未选中就改变颜色  */
    .trigger:not(:checked)+.groove {
      background-color: green;
    }

    /* 篮球 */
    .ball {
      height: 46px;
      width: 46px;
      background-color: rgb(217, 98, 58);
      border-radius: 50%;
      border: 2px solid black;
      background-image: radial-gradient(circle at 0px 50%, transparent 13px, black 13px, black 15px, transparent 15px), radial-gradient(circle at 46px 50%, transparent 13px, black 13px, black 15px, transparent 15px), linear-gradient(90deg, transparent 22px, black 22px, black 24px, transparent 24px), linear-gradient(0deg, transparent 22px, black 22px, black 24px, transparent 24px);
    }

    /* 投蓝的动画，挺搞心态的 */
    @keyframes ball {
      0% {
        transform: translate(0px, 0px) rotate(15deg);
      }

      6% {
        transform: translate(30px, -93px) rotate(30deg);
      }

      10% {
        transform: translate(50px, -145px) rotate(60deg);
      }

      14% {
        transform: translate(70px, -189px) rotate(75deg);
      }

      16% {
        transform: translate(80px, -208px) rotate(90deg);
      }

      18% {
        transform: translate(90px, -225px) rotate(100deg);
      }

      20% {
        transform: translate(100px, -240px) rotate(120deg);
      }

      24% {
        transform: translate(120px, -264px) rotate(130deg);
      }

      26% {
        transform: translate(130px, -273px) rotate(135deg);
      }

      30% {
        transform: translate(150px, -285px) rotate(140deg / 2);
      }

      34% {
        transform: translate(170px, -290px) rotate(150deg);
      }

      42% {
        transform: translate(210px, -273px) rotate(160deg / 6 * 5);
      }

      46% {
        transform: translate(230px, -253px) rotate(170deg);
      }

      48% {
        transform: translate(240px, -240px) rotate(180deg);
      }

      50% {
        transform: translate(250px, -225px) rotate(190deg);
      }

      52% {
        transform: translate(260px, -208px) rotate(195deg);
      }

      54% {
        transform: translate(270px, -189px) rotate(198deg);
      }

      56% {
        transform: translate(290px, -145px) rotate(200px);
      }

      58% {
        transform: translate(297px, -120px) rotate(203deg);
      }

      60% {
        transform: translate(297px, -80px) rotate(205deg);
      }

      75% {
        transform: translate(297px, -40px) rotate(208deg);
      }

      80% {
        transform: translate(297px, 0px) rotate(210deg);

      }

      85% {
        transform: translate(290px, -15px) rotate(213deg);
      }

      88% {
        transform: translate(287px, 0px) rotate(215deg);
      }

      90% {
        transform: translate(285px, -10px) rotate(218deg);
      }

      93% {
        transform: translate(283px, 0px) rotate(220deg);
      }

      97% {
        transform: translate(280px, -5px) rotate(220deg);
      }

      100% {
        transform: translate(280px, 0px) rotate(220deg);
      }
    }


    /* 右侧篮筐容器 */
    .right-container {
      position: relative;
      float: right;
      width: 230px;
      height: 200px;
    }

    /* 篮筐 */
    .hoop {
      position: absolute;
      top: -80px;
      right: 0;
      width: 56px;
      height: 10px;
      background-color: rgb(240, 46, 23);
    }

    /* 篮网 */
    .hoop::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 100%;
      box-sizing: border-box;
      width: 50px;
      height: 35px;
      border-radius: 0 0 6px 6px / 0 0 20px 20px;
      border-left: 3px solid #fff;
      border-right: 3px solid #fff;
      background-image: repeating-linear-gradient(45deg, #fff 20%, #fff 25%, transparent 25%, transparent 40%), repeating-linear-gradient(-45deg, #fff 30%, #fff 35%, transparent 35%, transparent 50%);
    }

    /* 篮板 */
    .hoop::after {
      content: "";
      position: absolute;
      right: -10px;
      bottom: -10px;
      background-color: rgb(69, 201, 133);
      width: 10px;
      height: 70px;
    }
  </style>
</head>

<body>
  <!-- 总的容器 -->
  <div class="container">
    <!-- 左侧篮球容器 -->
    <div class="left-container">
      <!-- 投篮触发器 -->
      <input type="checkbox" class="trigger"></input>
      <!-- 篮球容器 -->
      <div class="groove">
        <!-- 篮球 -->
        <div class="ball"></div>
      </div>
    </div>
    <!-- 右侧篮筐容器 -->
    <div class="right-container">
      <!-- 篮筐 -->
      <div class="hoop"></div>
    </div>
  </div>
</body>

</html>