前端:篮球投掷动画

篮球投掷动画

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

亮点:

  • 使用复选框和伪类选择器代替 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>

你可能感兴趣的:(css3,前端,css,html5)