iT邦幫忙

2023 iThome 鐵人賽

0
自我挑戰組

打造前端初學的知識培育庫系列 第 27

CSS -youtube 影片 - 圖片懸浮效果 - 關鍵字集合2 - Day27(補)

  • 分享至 

  • xImage
  •  

前言 :
今天來分享圖片懸浮效果,本來是做遊戲的人物介紹,但後來發現有使用到未授權照片所以就改換成鳥的介紹~順便介紹這個很棒的網站~

Pexels : https://www.pexels.com/zh-TW/license/
/images/emoticon/emoticon07.gif
參考影片 :
https://www.youtube.com/watch?v=-9vp6PyBZdE
語法介紹 :

流程圖 - 學習分析解構 :
https://ithelp.ithome.com.tw/upload/images/20231019/20160847hq641RybmH.png
開始實作 :
在 HTML 中建立名為.container 的容器,內部有 5 個 div 容器,
每個都設定 class="box",是作為共同設定。
class="one~five",是作為個別設定不同的樣式。
style="--img:url('')",


上一篇
CSS -youtube 影片 - 圖片懸浮效果 - 關鍵字集合1 - Day26
下一篇
Day28(補)
系列文
打造前端初學的知識培育庫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言