动画.gif

    1. <div class="clock">
    2.   <div class="dial"></div>
    3.   <div class="pendulum"></div>
    4. </div>
    1. * {
    2.   box-sizing: border-box;
    3.   margin: 0;
    4.   padding: 0;
    5. }
    7. body {
    8.   height: 100vh;
    9.   background: lightblue;
    10. }
    12. .dial {
    13.   width: 100px;
    14.   height: 100px;
    15.   margin: 0 auto;
    16.   background: pink;
    17.   border-radius: 50%;
    18.   border: 8px solid #fff;
    19. }
    21. .pendulum {
    22.   width: 10px;
    23.   height: 150px;
    24.   background: #fff;
    25.   margin: 0 auto;
    26.   position: relative;
    27.   top: -4px;
    28.   transform-origin: center top;
    29.   animation: swing 2s infinite linear;
    30. }
    32. .pendulum::before {
    33.   content: '';
    34.   display: box;
    35.   width: 30px;
    36.   height: 30px;
    37.   background: pink;
    38.   border-radius: 50%;
    39.   position: absolute;
    40.   bottom: 0;
    41.   left: 50%;
    42.   transform: translate(-50%, 50%);
    43.   border: 4px solid #fff;
    44. }
    46. @keyframes swing {
    47.   0% {
    48.     transform: rotate(45deg)
    49.   }
    51.   25% {
    52.     transform: rotate(0)
    53.   }
    55.   50% {
    56.     transform: rotate(-45deg)
    57.   }
    59.   75% {
    60.     transform: rotate(0)
    61.   }
    63.   100% {
    64.     transform: rotate(45deg)
    65.   }
    66. }