想实现的效果
最开始是看到了华为网站的这个卡片效果,想复刻一下。
效果细分
- 在普通状态下,为了让白字显示更清楚,图片前有一个渐变阴影的蒙版。
- 鼠标移入后,渐变阴影加深,图片放大,下方文字浮出。
- 鼠标移到了解更多时,箭头向右移动
代码实现
HTML
<div class="card">
<img src="../assets/img/hongkong.jpeg"/>
<!--mask用于添加阴影-->
<div class="mask"></div>
<div class="caption">
<h3 class="text"> 旅游 </h3>
<h2 class="text"> 香港的景色</h2>
<p class="text2"> 了解更多 </p>
</div>
</div>
CSS
.card{
width: 450px;
background-size: cover;
padding: 0px;
margin: 0px;
overflow: hidden;
position: relative;
cursor: pointer;
}
img{
display: block; /*删除此行,父盒子高度会出现超出*/
width: 100%;
transition: all 0.5s;
}
.caption{
width:100%;
position: absolute;
bottom: -26px;
margin: 0px;
transition: all 0.5s;
}
/*鼠标移入,图片放大*/
.card:hover img{
transform: scale(1.1);
}
/*鼠标移入,文字上升*/
.card:hover .caption{
transform: translateY(-40px);
}
.mask{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
/*鼠标移入,渐变阴影加深*/
.card:hover .mask{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
}
.text{
color: rgba(255,255,255);
padding: 0px 0px 5px 16px;
margin: 0px;
user-select: none;
}
.text2{
color: rgba(255,255,255);
padding: 5px 0px 10px 16px;
margin: 0px;
user-select: none;
}
.text2::after{
content: ">";
color:rgb(158, 218, 255);
font-size: large;
font-weight: bolder;
transition: 0.5s;
}
/*鼠标移入,箭头右移*/
.text2:hover::after{
padding-left: 5px;
}