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

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

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>

上面的图片文件需要引入