弹性球炫酷球

最新推荐文章于 2024-02-22 16:53:56 发布

小木荣

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量203

点赞数 1

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

本文链接：https://blog.csdn.net/W2001r/article/details/126336300

版权

web前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

弹性球

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 100%;
        height: 700px;
        border-bottom: 10px solid #000;
        /* 外边距重叠，开启BFC */
        overflow: hidden;
      }

      .ball {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: gray;
        animation: bounce 10s ease-in;
      }

      @keyframes bounce {
        0% {
          margin-top: 0;
        }

        /* 这些时刻到底部 */
        5%,
        15%,
        25%,
        35%,
        45%,
        55%,
        65%,
        75%,
        85%,
        95%,
        98%,
        to {
          margin-top: 600px;
          animation-timing-function: ease-out;
        }
        /* 设置速度 慢到快 */
        10%,
        20%,
        30%,
        40%,
        50%,
        60%,
        70%,
        80%,
        90% {
          animation-timing-function: ease-in;
        }

        /* 每次弹起下降的距离 */
        10% {
          margin-top: 60px;
        }

        20% {
          margin-top: 120px;
        }

        30% {
          margin-top: 180px;
        }

        40% {
          margin-top: 240px;
        }

        50% {
          margin-top: 300px;
        }

        60% {
          margin-top: 360px;
        }

        70% {
          margin-top: 420px;
        }

        80% {
          margin-top: 480px;
        }

        90% {
          margin-top: 540px;
        }

        96% {
          margin-top: 580px;
        }

        99% {
          margin-top: 590px;
        }
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="ball"></div>
    </div>
  </body>
</html>

炫酷球

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        float: left;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        animation: bounce 0.5s infinite ease-in alternate;
      }

      .ball1 {
        background-color: red;
        animation-delay: 0.1s;
      }

      .ball2 {
        background-color: yellow;
        animation-delay: 0.2s;
      }

      .ball3 {
        background-color: green;
        animation-delay: 0.3s;
      }

      .ball4 {
        background-color: blue;
        animation-delay: 0.4s;
      }

      .ball5 {
        background-color: pink;
        animation-delay: 0.5s;
      }

      .ball6 {
        background-color: orange;
        animation-delay: 0.6s;
      }

      .ball7 {
        background-color: fuchsia;
        animation-delay: 0.7s;
      }

      .ball8 {
        background-color: gray;
        animation-delay: 0.8s;
      }

      .ball9 {
        background-color: darkcyan;
        animation-delay: 0.9s;
      }

      .ball10 {
        background-color: indigo;
        animation-delay: 1s;
      }

      @keyframes bounce {
        0% {
          margin-top: 0;
        }

        100% {
          margin-top: 500px;
        }
      }
    </style>
  </head>
  <body>
      <div class="ball1"></div>
      <div class="ball2"></div>
      <div class="ball3"></div>
      <div class="ball4"></div>
      <div class="ball5"></div>
      <div class="ball6"></div>
      <div class="ball7"></div>
      <div class="ball8"></div>
      <div class="ball9"></div>
      <div class="ball10"></div>
  </body>
</html>