如何制作炫酷的卡片悬停效果
演示
视频教程 -
让我们开始编程吧
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
你好，很高兴你来到这里。我是 Kunaal，今天我们将学习如何制作炫酷的 3D 卡片悬停效果。你可以在下方看到演示。
演示
视频教程 -
如果您觉得这篇文章难以理解，或者需要更详细的解释，可以观看视频教程。
如果您喜欢这个视频教程，请考虑订阅我的YouTube频道。
让我们开始编程吧
在 HTML 文件中的<body>标签下写入
<div class="card">
<div class="card-img"></div>
<div class="card-body">
<span class="bg"></span>
<span class="bg"></span>
<span class="bg"></span>
<div class="content">
<h2 class="title">card 01</h2>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aperiam fugiat eos odit numquam vitae facere dolore id libero sit!</p>
</div>
</div>
</div>
之后我们只需要添加 CSS 即可。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'roboto', sans-serif;
background: rgb(49, 162, 255);
perspective: 1000px;
}
.card{
width: 300px;
height: 450px;
position: relative;
transform-style: preserve-3d;
transition: 1s;
}
.card-img{
position: relative;
width: 100%;
height: 100%;
background: url(img.jpg);
background-size: cover;
border-radius: 20px;
transform: translateZ(40px);
}
.card-body{
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, -40px) rotateY(180deg);
width: 85%;
height: 87%;
border-radius: 20px;
overflow: hidden;
border: 5px solid #fff;
}
.card:hover{
transform: rotateY(180deg);
}
.card-body .bg{
position: absolute;
background: #fff;
border-radius: 100px;
width: 0%;
transition: .5s;
}
.card-body .bg:nth-child(1){
height: 25%;
transform-origin: left;
top: 0;
left: -30%;
transform: rotate(-10deg);
}
.card-body .bg:nth-child(2){
height: 50%;
transform-origin: right;
top: 5%;
right: -30%;
transform: rotate(-10deg);
}
.card-body .bg:nth-child(3){
height: 50%;
transform-origin: left;
top: 70%;
left: -30%;
transform: rotate(-10deg);
}
.card:hover .card-body .bg{
width: 200%;
transition-delay: 1s;
}
.card:hover .card-body .bg:nth-child(2){
transition-delay: 1.5s;
}
.card:hover .card-body .bg:nth-child(3){
transition-delay: 2s;
}
.content{
position: relative;
opacity: 0;
transition: .5s;
padding: 40px 10px;
text-align: center;
}
.title{
font-size: 60px;
margin-bottom: 20px;
color: #292929;
text-transform: uppercase;
}
.card:hover .content{
opacity: 1;
transition-delay: 2.5s;
}
希望你都理解了。如果你有任何疑问，或者发现我犯了任何错误，或者有任何建议，请随时在评论区留言。
文章来源：https://dev.to/themodernweb/how-to-make-an-awesome-card-hover-effect-45j5如果你对编程感兴趣，想了解我这个15岁的少年是如何编写代码并设计出这些作品的，可以关注我的Instagram账号。我也计划在Instagram上分享我的游戏开发成果。