效果
网页中在小视频播放时，有的出现那个播放按钮忽大忽小的情况，看下面的动图
思路分析
效果分析
仔细分析一波，应用盒子模型，这个播放按钮应该是一个img标签，然后设置的scale属性值，然后hover之后，scale值变小了，再加一个过渡，
除此之外还需要用到子绝父相，让这个播放图片水平垂直居中
代码分析
这里只做demo来解释效果的由来，具体应用可以放在列表标签等等。
- html代码
<div class="pic">
<img src="./src/03-1.jpeg" alt="图片无法加载">
</div>
- 设置基础样式
.pic {
margin: 50px auto;
width: 250px;
}
.pic img {
display: block;
width: 100%;
}
- 用一个伪元素插入图片，然后应用子绝父相把播放图片在pic盒子里水平垂直居中
给pic盒子加上position:relative;，播放按钮是由大到小，先设置scale(5),同时需要给pic盒子设置overflow:hidden;，这里不了解定位盒子水平垂直居中的可以参考我的另一篇文章：盒子水平垂直居中方法总结
.pic::before {
position: absolute;
content: '';
left: 50%;
top: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%) scale(5);
background: url(./src/03-2.png) 0 0/100%;
}
- 制作鼠标hover的动态效果
给pic盒子加上hover属性，设置scale(1)，这里需要加上前面的translate:(-50%,-50%)，是因为上面下面都有transform属性，会发生样式覆盖，会导致定位盒子不再水平垂直居中，同时需要加上由opacity:0;到opacity:1的过渡
加上css代码
.pic::before {
opacity: 0;
transition: all .2s;
}
.pic:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pic {
position: relative;
margin: 50px auto;
width: 250px;
overflow: hidden;
}
.pic img {
display: block;
width: 100%;
}
.pic::before {
position: absolute;
content: '';
left: 50%;
top: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%) scale(5);
background: url(./src/03-2.png) 0 0/100%;
opacity: 0;
transition: all .2s;
}
.pic:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
</style>
</head>
<body>
<div class="pic">
<img src="./src/03-1.jpeg" alt="图片无法加载">
</div>
</body>
</html>
