<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
width: 100%;
}
.box {
width: 249px;
height: 210px;
margin: 50px auto;
overflow: hidden;
}
.box p {
color: #3b3b3b;
padding: 10px 10px 0 10px;
}
.box .pic {
position: relative;
}
/* 在图片盒子上加一个伪元素添加播放按钮 */
.box .pic::after {
/* 子绝父相水平垂直居中 */
position: absolute;
left: 50%;
top: 50%;
/* 播放按钮在默认状态下是放大的，鼠标移入后过渡是缩小的效果 */
transform: translate(-50%, -50%) scale(6);
content: "";
width: 58px;
height: 58px;
background-image: url(../08-和平精英-缩放/images/play.png);
transition: all 1s;
/* 全透明过渡，这里不能用display：none，
display代表是两种状态下的切换，没有过渡效果，透明度 opacity 有过渡的效果 */
opacity: 0;
}
.box:hover .pic::after {
/**** 一定要把transform位移的位置带上，如果只写scale位置就不居中了，因为上面绝对定位有transform效果了，下面再写transfor其他属性效果那么位移效果会被层叠覆盖，播放按钮不居中了 ，所以一定要把位移坐标加上 */
transform: translate(-50%, -50%) scale(1);
/* 鼠标移入的状态不透明 */
opacity: 1;
}
/* 实现思路:
1.摆放一个播放按钮 压在图片的上面;
2.hover效果,实现播放按钮淡入淡出;
*/
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="pic">
<img src="./images/party.jpeg" alt="">
<!-- 加播放按钮 -->
</div>
<p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
</li>
</ul>
</div>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
