html的DIV+CSS制作牛顿摆

最新推荐文章于 2024-09-10 22:58:41 发布

心平气荷.

最新推荐文章于 2024-09-10 22:58:41 发布

阅读量136

点赞数 1

分类专栏： css案例练习 CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_53306713/article/details/129191860

版权

css案例练习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

<!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>
    .box {
      width: 400px;
      height: 400px;
      border: 10px solid skyblue;
      margin: 0 auto;
      display: flex;
    }

    .item {
      width: 80px;
      height: 400px;
      position: relative;
    }

    .line {
      width: 3px;
      height: 280px;
      background-color: pink;
      position: absolute;
      left: 40px;
      top: 0;
    }

    .ball {
      width: 80px;
      height: 80px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 280px;
      left: 0;
    }

    #item1 {
      transform-origin: top center;
      animation: item1 4s 0s linear infinite;
    }



    @keyframes item1 {
      0% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(30deg);
      }

      50% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(0deg);
      }
    }

    #item5 {
      transform-origin: top center;
      animation: item5 4s 2s linear infinite;

    }

    @keyframes item5 {
      0% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(-30deg);
      }

      50% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(0deg);
      }
    }
  </style>
</head>

<body>

  <div class="box">
    <div class="item" id="item1">
      <div class="line"></div>
      <div class="ball"></div>
    </div>
    <div class="item">
      <div class="line"></div>
      <div class="ball"></div>
    </div>
    <div class="item">
      <div class="line"></div>
      <div class="ball"></div>
    </div>
    <div class="item">
      <div class="line"></div>
      <div class="ball"></div>
    </div>
    <div class="item" id="item5">
      <div class="line"></div>
      <div class="ball"></div>
    </div>
  </div>

</body>

</html>