CSS2D转换案例知识点:
- 位移:translate
- 缩放:scale
- 渐变:background-image: linear-gradient( red, red );
- 过渡:transition
- 透明:opcity
CSS代码:
* {
margin: 0;
padding: 0;
/* 利用CSS3盒子模型防止盒子变大发生抖动 */
box-sizing: border-box;
}
.box {
overflow: hidden;
position: relative;
width: 667px;
height: 375px;
margin: 200px auto;
}
.box img {
width: 100%;
height: 100%;
transition: all .4s;
}
.box::after {
content: "百木心枪-赵云";
position: absolute;
bottom: 20px;
left: 50%;
font-size: 22px;
color: #fff;
transform: translateX(-50%);
transition: all .4s;
}
.box .xq {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
text-align: center;
color: #fff;
border: 3px solid #dcaf6c;
opacity: 0;
transition: all .4s;
}
.xq h1 {
margin-top: 120px;
margin-bottom: 10px;
font-weight: 300;
color: #dcaf6c;
}
.xq p {
font-size: 16px;
line-height: 30px;
}
.box:hover::after {
opacity: 0;
}
.box:hover img {
transform: scale(1.2);
}
.box:hover .xq {
opacity: 1;
}
HTML代码:
<div class="box">
<img src="image/zhaoyun.png" alt="">
<div class="xq">
<h1>百木心枪-赵云</h1>
<p>战士<br>上线时间:2022-03-18</p>
</div>
</div>
效果图: