<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { position: relative; width: 200px; margin: 0 auto; margin-top: 100px; } .father img { width: 100%; } .father img:nth-child(2) { position: absolute; top: 50%; left: 50%; margin-left: -50%; margin-top: -50%; transition: all .5s; opacity: 0; } .father:hover img:nth-child(2) { transform: scale(0.5); opacity: 1; } </style> </head> <body> <div class="father"> <img src="./images/party.jpeg" alt=""> <img src="./images/play.png" alt="" class="yuan"> </div> </body> </html>
先将小圆圈定位到中心位置，之后使用缩放效果进行模拟，需要注意的是，要使用透明效果，还有就是定位居中的使用使用移动，则要注意后面的层叠性。
