當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS+JS实现 ❤️高光立体游戏卡片悬停ui特效❤️

發(fā)布時間：2025/3/12 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现 ❤️高光立体游戏卡片悬停ui特效❤️ 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號作者? ?簡歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】

🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼?

代碼目錄：

主要代碼實(shí)現(xiàn)：

CSS樣式：

* {margin: 0;padding: 0;box-sizing: border-box; }body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #353540; }.l-container {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 30px;width: 100%;max-width: 1200px;padding: 30px; }@media screen and (max-width: 760px) {.l-container {grid-template-columns: repeat(2, 1fr);} }.b-game-card {position: relative;z-index: 1;width: 100%;padding-bottom: 150%;perspective: 1000px; }.b-game-card__cover {position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);background-size: cover;perspective-origin: 50% 50%;transform-style: preserve-3d;transform-origin: top center;will-change: transform;transform: skewX(0.001deg);transition: transform 0.35s ease-in-out; }

HTML代碼 :

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Steam inspired game card hover effect</title><link rel="stylesheet" href="css/style.css"></head><body><div class="l-container"><div class="b-game-card"><div class="b-game-card__cover" style="background-image:url(img/game_1.jpg);"></div></div><div class="b-game-card"><div class="b-game-card__cover" style="background-image:url(img/game_2.jpg);"></div></div><div class="b-game-card"><div class="b-game-card__cover" style="background-image:url(img/game_3.jpg);"></div></div><div class="b-game-card"><div class="b-game-card__cover" style="background-image:url(img/game_4.jpg);"></div></div></div></body></html>

上面的圖片文件需要引入

源碼獲取

大家可以點(diǎn)贊、收藏、關(guān)注、評論我啦、查看博主主頁或下方微信公眾號獲取~！

打卡文章更新?47?/? 100天

精彩推薦更新中：

HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》

Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️高光立体游戏卡片悬停ui特效❤️的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于java ssm springboo
下一篇： HTML+CSS+JS实现 ❤️贪吃蛇游