html/css-实现呼吸灯

呼吸灯

---

效果：

html

   <div class="wrap">
        <div class="out">
          <div class="in"></div>
        </div>
    </div>

css

<style>
    /* 定义动画 */
    @keyframes light{
      from{
        transform: scale(0.3);
      }to{
        transform: scale(1);
      }
    }
    .wrap{
      width: 400px;
      height: 400px;
      background-color: black;
      margin: 50px auto;
      /* 使用flex布局 让子元素居中 */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .out{
      width: 250px;
      height: 250px;
      background-color: rgb(42, 71, 165);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      /* 使用动画 */
      animation: light 5s linear infinite alternate;
    }
    .in{
      width: 150px;
      height: 150px;
      background-color: greenyellow;
      border-radius: 50%;
    }
</style>