???? 作者主页：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>上面的图片文件需要引入
源码获取
打卡 文章 更新 47 / 100天
