TEST3

by wllai2001

HTML

<div class="container">
    <div class="circle">A</div>
    <div class="circle2">B</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: -15%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: rotate 4s linear infinite;
    }

    .circle2 {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #e74c3c;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: rotate 4s linear infinite reverse;
    }