TEST4

by wllai2001

HTML

<div class="container">
    <div class="circle"></div>
    <div class="circle2"></div>
  </div>

CSS

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

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    .container {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #3498db;
      animation: rotate 4s linear infinite;
    }

    .circle {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #e74c3c;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translateX(80px) translateY(-15px); /* 貼著大圓外側 */
      animation: rotate 4s linear infinite;
    }

    .circle2 {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #e74c3c;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) translateX(-80px) translateY(15px); /* 貼著大圓外側 */
      animation: rotate 4s linear infinite reverse;
    }