Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
一個元素有 A 狀態,有 B 狀態,而 A 狀態 到 B 狀態的過程,就叫做轉場(transition)。
以下的範例,轉場效果:
範例:大正方形 → 小圓形
檔名建議:text_cover.html
說明:
整個區塊是一個連結,點擊開新分頁。(連到任意網址皆可)
圓角 5px。
「美麗的風景」文字顏色 #FFF
,背景色 hsla(0, 0%, 0%, .5)
,文字大小 .8rem
。定位在距離上方 10px、距離左側 0px。
「次要說明」文字,樣式同上,但預設看不到,定位在距離左側 0px、距離下方 0px。
滑鼠移過連結區塊,「次要說明」文字,往上滑出(transition):transform .5s
。
螢幕寬度小於等於 767.98px時,「次要說明」直接出現。
結果示意:
提供 html:
參考作法: