題目

CSS Challenge Day4

上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的template，當我們真的不會的時候，還是可以參考他們的寫法，所以沒有想像中困難。

我做好的此題CSS Challeage解答

那麼我們就開始吧。

題目分析

這個題目要求我們製作三個具有縮放效果的圓形。每個圓形使用不同的動畫起始點進行縮放，並通過 box-shadow 增強視覺效果。動畫的節奏是一致的，並且使用 alternate 模式實現反向循環。

開始解題

基礎框架設計

<div class="frame">
  <div class="center">
    <div class="layer layer-1"></div>
    <div class="layer layer-2"></div>
    <div class="layer layer-3"></div>
  </div>
</div>

我使用了三個 div 來代表三個圓形，並用 .layer 來統一處理它們的樣式，將它們放入 .center 容器進行定位。
每個圓形的層次通過 layer-1、layer-2、layer-3 來區分，以實現動畫的漸進效果。

基礎 CSS 設計

我在 .frame 內設定了底色，在 .center 內設定了容納三個圓形的方框，並用 absolute 將他們定位在畫面中間。

圓形大小與位置設計

$centerWH: 200px;
$layer1WH: 90px;
$layer1LeftTop: ($centerWH/2) - ($layer1WH/2);
$layer2WH: 60px;
$layer2LeftTop: ($centerWH/2) - ($layer2WH/2);
$layer3WH: 30px;
$layer3LeftTop: ($centerWH/2) - ($layer3WH/2);

.layer-1 {
  z-index: 1;
  width: $layer1WH;
  height: $layer1WH;
  top: $layer1LeftTop;
  left: $layer1LeftTop;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  animation: animate-1 2s infinite alternate;
  animation-fill-mode: both;
}

.layer-2 {
  z-index: 2;
  width: $layer2WH;
  height: $layer2WH;
  top: $layer2LeftTop;
  left: $layer2LeftTop;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  animation: animate-2 2s infinite alternate;
  animation-fill-mode: both;
}

.layer-3 {
  z-index: 3;
  width: $layer3WH;
  height: $layer3WH;
  top: $layer3LeftTop;
  left: $layer3LeftTop;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  animation: animate-3 2s infinite alternate;
  animation-fill-mode: both;
}

這邊我設定了三個圓形的大小，從 90px、60px 到 30px 遞減，並且使用變數計算，讓他們能分別定位在中央。

使用 z-index 控制了圓形的層級，確保 layer-3 在最上層，layer-1 在最底層。

每個圓形的動畫都設定為 2 秒循環，並且使用 animation-fill-mode: both，確保動畫在回復時的狀態保持一致。

因為動畫不能像一般的排版一樣使用一般的定位方式，所以我覺得這邊最難的是計算彼此之間的關係，讓每一顆都能居中。

@keyframes 動畫設計

@keyframes animate-1 {
  0%, 10% {
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }
  100% {
    box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

@keyframes animate-2 {
  0%, 40% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }
  100% {
    box-shadow: 8px 8px 12px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

@keyframes animate-3 {
  0%, 70% {
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    transform: scale(0);
  }
  100% {
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
}

• animate-1：第一個圓形在 0% 時是縮小的，並逐漸放大至 100%。
• animate-2：第二個圓形的動畫從 40% 開始縮放，延遲了第一個圓形的時間，達到漸進效果。
• animate-3：第三個圓形從 70% 開始縮放，進一步延遲動畫。
• 每個圓形都有不同的起始點，確保動畫不會同時進行，創造一個有節奏的縮放效果。scale(0) 代表圓形最小，scale(1) 代表圓形達到最大狀態。

技巧總結

這次挑戰的關鍵在於對動畫的瞭解，及多個動畫同步時的掌控能力

• 多層次動畫的協同運作：三個圓形各自在不同時間點開始縮放，通過變數控制大小和位置，讓動畫看起來更加協調。
• 變數的應用：使用變數計算每個圓形彼此的定位，確保能定位在正中間。

Wrap up and go home

那今天就先到這裡，明天我們再繼續來玩下一題。