css challenge Day 80

2024/06/13に公開

100 Day CSS Challenge

Day #80

Day#80
第 80 天的挑戰

hover
Hover 過去是像這個樣子



HTML

HTML 的架構就比較單純,其實就四個 div 而已。
原先設計稿是滑鼠滑過字體才會顯示,但我看到有把字做轉向的設計,是比較符合使用者體驗的。

<div class="frame">
  <div class="center">
		<div class="box"><span class="text">first</span></div>
		<div class="box"><span class="text">second</span></div>
		<div class="box"><span class="text">third</span></div>
		<div class="box"><span class="text">fourth</span></div>
  </div>
</div>

一開始是直接把文字寫在 div 裡面,
像這樣:<div class="box">first</div> ,
但後來寫 css 的時候發現要同時轉動好像搞得很複雜。
所以又再加上 spandiv的轉動跟字的轉動分開來。
(也許也是可以,如果有其他思路歡迎留言一起討論。)

CSS (SCSS)

  1. 先對 .box 做基本的設計:置中、字體設定、顏色設定…等
.box{
	width:100%;
	background-color: $color;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	font-weight: 700;
	text-transform:uppercase;
	color: $font-color;
  1. 接著想要讓字體預設是直立的感覺,所以讓他轉了90度。
.text{
		rotate:90deg;
	}
  1. .box 的背景色是 #85b8cb,設計稿是做跳色的設計,所以使用了 nth-child(even) 來處理隔行跳色 #1d6a96
	&:nth-child(even){
		background-color: $dark-color;
	}
  1. 重頭戲來啦!
    首先 .box 是有先設定 width:100% 的,hover 之後變成 width:450%,就會有滑過去變大的動畫感。
    (加個 transition 讓他絲滑一下)
    並且讓字體轉回 0deg,就會有滑過字也轉橫的效果了....……………才沒有!!!
&:hover{
		width: 450%;	
		.text{
			rotate:0deg;
			transition:.5s;
		}
	}

這時候發現,居然只有字在轉,背景是沒有跟著變大的。
問題出在哪呢?

  1. 我先重新做了一個沒有字的版本,確認過 width:100%; 變成 width:450%; 的思路是沒有問題的。
    無字版本
    無字的版本
    字本身也會轉,所以字本身也沒有問題。
    那就是結構上的問題了。

只有字吃的到,而 .box 吃不到?那我把字做 position 呢?

.text{
		position:absolute;
		rotate:90deg;
	}

成功啦!!果然是層級的問題呀~讓字體跳出 .box 的區塊, .box 就可以吃到 width 的效果了。

結語

這是第一次做 100 DayCss 的挑戰,因為才剛開始學 CSS 不久,也許還有更好的寫法或是理解上的錯誤,也歡迎留言指教。

Discussion