CSS 实现悬停多圆角的卡片
CSS 实现悬停多圆角的卡片
效果展示
CSS 知识点
- CSS 基础知识回顾
- box-shadow 属性实现圆角的知识回顾
整体页面布局实现
<div class="container">
<div class="card">
<div class="imgBx">
<img src="bg1.jpg" />
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum dicta natus
dolorum fugiat magni. Unde!
</p>
<h2>Card 01</h2>
</div>
</div>
实现整体卡片容器样式
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 60px;
}
.container .card {
position: relative;
width: 320px;
height: 250px;
background: #fff;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
/* 属性改变时,动画执行时间 */
transition: 0.5s;
}
编写卡片收起样式
.container .card .imgBx {
position: absolute;
inset: 20px 20px 50px 20px;
border-radius: 15px;
transition: 0.5s;
z-index: 100000;
}
.container .card .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.container .card p {
position: relative;
padding: 30px;
text-align: center;
/* 卡片收起时隐藏内容元素,只有鼠标悬停在卡片上时才会显示元素 */
opacity: 0;
visibility: hidden;
transform: translateY(-50px);
transition: 0.5s;
}
.container .card h2 {
position: absolute;
bottom: 8px;
color: #333;
transition: 0;
font-weight: 600;
}
实现上述代码后可以看到如下的效果:
编写卡片鼠标悬停展开样式
完成上述代码后,鼠标悬停卡片上还没有展开的样式,接下来就是实现展开样式。具体的代码如下:
实现卡片容器鼠标悬停展开样式及图片样式
.container .card:hover {
height: 350px;
}
.container .card:hover .imgBx {
inset: -50px 60px 250px 60px;
box-shadow: 0 0 0 10px var(--clr);
}
实现卡片容器展开后图片的样式
.container .card .imgBx::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
left: -30px;
border-top-right-radius: 20px;
transform: translateY(-100px);
opacity: 0;
box-shadow: 5px -5px 0 4px var(--clr);
pointer-events: none;
transition: 0.5s;
}
.container .card .imgBx::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
right: -30px;
border-top-left-radius: 20px;
transform: translateY(-100px);
opacity: 0;
box-shadow: -5px -5px 0 4px var(--clr);
pointer-events: none;
transition: 0.5s;
}
实现卡片容器鼠标悬停展开后的图片样式
.container .card:hover .imgBx::before {
opacity: 1;
transform: translateY(50px);
}
.container .card:hover .imgBx::after {
opacity: 1;
transform: translateY(50px);
}
完成所有上述代码后,我们可以看到如下的效果:
实现卡片容器鼠标悬停展开后的内容和标题样式
.container .card:hover p {
opacity: 1;
visibility: visible;
transform: translateY(-6px);
}
.container .card:hover h2 {
padding: 5px 25px;
background: #65ff50;
bottom: -25px;
border-radius: 15px;
box-shadow: 0 0 0 10px var(--clr);
}
实现上述代码后就可以完成所有效果。
完整代码下载
原文地址:https://blog.csdn.net/qq_33003143/article/details/137541290
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!