想請問路易莎的這個浮起效果怎麼辦到的?

前端 css 菜鳥前端前端新手村前端工程師

jason07 2023-02-09 17:27:05 ‧ 4143 瀏覽

分享至

路易莎的這個圖。
他是游標過去會發生字體出來，背景有點黑。

最近研究到這個效果，我有查詢相關的招式，也用了F12去看他大概怎麼弄的：
有查詢到是ｃｓｓ的ｈｏｖｅｒ。

以及我發現是
-webkit-transform: translate3d(0,50px,0);

可是這個我丟到codepen那些地方去測試，沒有效果，不太清楚該怎麼修正？

第二個是背景黑色的區塊，我知道好像可以用rgba或是opacity去調整，
但看了一下感覺不太像，
他黑掉的地方有點像是下半部分....
不太清楚怎麼調整成這樣變得更有質感（？　

我研究了很多招最後想了三四個小時，有考慮：
難道是box shadow嗎但實際測試發現那個好像是外圍部分XD 有點搞錯糗糗的

這兩個效果該怎麼實現呢？

看更多先前的討論...收起先前的討論...

ShawnL iT邦新手 1 級 ‧ 2023-02-10 09:26:59 檢舉

建議把你試過的程式碼附上，即便是錯誤的也沒關係

jakeuj iT邦新手 5 級 ‧ 2023-02-10 11:10:54 檢舉

我以為現在漂浮咖啡也可以來這邊問

jason07 iT邦新手 5 級 ‧ 2023-02-10 11:28:31 檢舉

@ShawnL iT 有阿我不是附上了XD 我文章有寫我用的是rgba跟opacity
然後我也試了-webkit-transform: translate3d(0,50px,0);
你沒仔細看文章齁XD

jason07 iT邦新手 5 級 ‧ 2023-02-10 11:28:55 檢舉

@jakeuj 那是什麼哈哈哈沒聽過耶

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

小哈片刻

iT邦研究生 4 級 ‧ 2023-02-09 23:25:15

最佳解答

文字可以靠opacity(透明度)和bottom(位置)的變化。
黑色背景靠的是opacity(透明度)變化。
漸層用的是 linear-gradient。

先加上transition，設定樣式變化時的動畫速度、淡入淡出等。
然後在父層:hover的時候，改變樣式，這樣就可以產生動畫了。

下面提供一個簡單的範例。

HTML

<div class="box">
  <img src="https://i.imgur.com/AiG5JY1.gif">
  <div class="black-bg"></div>
  <div class="title">Hello</div>
</div>

CSS

.box {
  display: inline-flex;
  position: relative;
}
.black-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0, rgba(0,0,0,0.8), rgba(0,0,0,0));
  opacity: 0;
  transition: all 0.2s ease;
}
.title {
  position: absolute;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  opacity: 0;
  bottom: -20px;
  transition: all 0.2s ease;
}

.box:hover .black-bg {
  opacity: 1;
}
.box:hover .title {
  opacity: 1;
  bottom: 20px;
}