源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav{ width: 960px; height: 540px; overflow: hidden; margin-left: auto; margin-right: auto; border: 1px solid black; transition: all 0.3s; clip-path: polygon(10% 0%,100% 0,100% 90%,90% 100%,0% 100%,0% 10%); } .img{ transition: all 0.3s; transform: scale(1.1); } .img:hover{ transform: scale(1); transition: all 0.3s; } .nav:hover{ /*border-radius: 100px 0px 100px 0px ;*/ clip-path: polygon(0% 0%,100% 0,100% 100%,100% 100%,0% 100%,0% 0%); transition: all 0.3s; } </style> </head> <body> <div class="nav"> <div class="img"> <img src="img/QQ图片20220915182639.jpg" alt=""> </div> </div> </body> </html>
点击之后进行hover效果图片的左上以及右下角会收缩进去会有动画效果