Day 19 - CSS Challenge #11：Walking Boots(上)

16th鐵人賽 css css教學

hitomiyang

2024-10-03 00:39:14

104 瀏覽

分享至

題目

CSS Challenge Day11

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

我做好的此題CSS Challeage解答

那麼我們就開始吧。

題目分析

這個題目要求我們製作一雙自己走路的靴子

背景漸層跟地板。
鞋子本身
動畫
- 初次 loading 時的淡入淡出動畫
- 鞋子前後移動的動畫
- 鞋子踩地板上下移動的動畫

開始解題

基礎架構

<div class="frame">
  <div class="move">
		<div class="leg left">
			<div class="shoe"></div>
		</div>
		<div class="leg right">
			<div class="shoe"></div>
		</div>
  </div>
	<div class="floor"></div>
</div>

因為架構很簡單，所以就先做基礎的開版。
首先，我把 template 內的 .center 改名成 .move 讓它把需要移動的部分都包起來。而跟 move 同層級的是另一個叫 .floor 的 div，我準備之後要讓它做成地平線。

由此可知大致架構如下：

.move：內部容器，包含兩條腿，負責移動的效果。
.leg：分為左右兩條腿，每條腿內包含一個。
.shoe：我們等等會放鞋子本人的 svg。
.floor：地板或背景元素，可能用來與角色的移動互動。

背景漸層

.frame {
    ...
    background: radial-gradient(ellipse at center, #f5e6d5 0%,#dabe9c 100%);
}

先用我們第一天教的小工具來吸底色，然後使用小工具的漸層工具，來制作我們要的漸層。
當然如果你要自己嘗試著寫也是可以的，具體內容如下：

radial-gradient：表示使用徑向漸層（從中心往外輻射）。
ellipse at center：定義漸層的形狀為橢圓，從元素的中心開始。
#f5e6d5 0%：在 0% 位置開始時的顏色是 #f5e6d5（淺米色）。
#dabe9c 100%：到 100% 位置變成 #dabe9c（淺棕色）。

地板

$moveH: 245px;
$floorH: 400px - $moveH;

.floor {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #232323;
	height: $floorH;
}

地板這段就比較單純，我們先用第一天的尺規小工具，算出上半截的空間有多少，把它取名叫 moveH，然後把我們的 .frame 高度 400 去剪掉上半截的空間，就可以得知地板的高度。

$moveH：表示移動的區域高度，這裡為 245px。
$floorH：為 .floor 的高度，計算方式是將總高度 400px 減去 $moveH。
position: absolute：確保 .floor 被固定在頁面底部。
bottom: 0, left: 0, right: 0：將 .floor 置於視窗的底部並佔滿寬度。

鞋子本身

`move` 區塊

.move {
  position: relative;
	width: 100%;
	height: $moveH;
	overflow: hidden;
	animation: animate-fadeIn .8s ease-out 1s;
	animation-fill-mode: both;
}

這段我們先對鞋子要移動的區塊作一些處理，等等再來畫動畫。

position: relative：確保 .move 區塊相對定位。
width: 100%：讓 .move 區塊的寬度佔滿父容器的寬度。
height: $moveH：使用之前定義的 $moveH 變數設置高度（245px）。
overflow: hidden：隱藏超出 .move 區塊範圍的內容。
animation：先將我們等等要做的淡入淡出動畫取好名字 animate-fadeIn，持續 .8s，動畫以 ease-out 加速，延遲 1s 後執行。
animation-fill-mode: both：確保動畫在結束後保持最終狀態。

左右腳

.leg {
	position: absolute;
	left: 145px;
	top: 0;
	width: 151px;
	height: $moveH;
	transform-origin: 50% 0 ;
}

這邊先定位兩隻腳的位置，確保他是在 move 內做定位。
這邊另一個重點是，要讓鞋子本身的定位點是在上方的正中間，截圖給大家看：
在圖中的圓圈圈就是這個 div 的圓心位置，這樣等等前後走路鞋子移動的方式才會是正確的。

其餘要點說明如下：

position: absolute：使 .leg 區塊可以精確地根據其父容器進行定位。
left: 145px：將 .leg 的左側距離父容器的左邊界設置為 145px。
top: 0：將 .leg 的頂部與父容器的頂部對齊。
width: 151px：設定 .leg 的寬度為 151px。
height: $moveH：使用變數 $moveH，確保其高度一致。
transform-origin: 50% 0：設置變形原點在寬度的中間和高度的頂部。

鞋子本人

.shoe {
	position: absolute;
	width: 151px;
		height: 128px;
	left: 0;
	bottom: 0;
	background: url('https://100dayscss.com/codepen/doc-martens.svg') center center no-repeat;
	transform-origin: 0 95%;
}

這邊我是直接使用題目提供的鞋子 svg 檔，並且我去看了一下他本身的高度是 128px，所以這邊我就直接高度設定 128px，至於寬度我則是採用了他外面父項的 .leg 的寬度 151px。

因為我們使用 background 的方式引入這個 svg，所以在這邊一定要寫寬高，不然是看不到東西的（ div 裡面沒有元素可以把它撐開）

這邊有一個要點也是設置變形原點，我將他設定在 0 95% 來讓它不會超出地板太多，形成視覺上看起來好像後腳跟有踩到地面的感覺。

具體說明如下：