<!DOCTYPE html> <html> <head> <title>图片过渡效果</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100vh; } img { width: 200px; height: 200px; margin: 20px; border-radius: 50%; transition: all 1s ease-in-out; } img:hover:nth-child(1) { border-radius: 0%; } img:hover:nth-child(2) { transform: rotate(-60deg); } img:hover:nth-child(3) { transform: rotate(360deg); } img:hover:nth-child(4) { transform: rotate(-10deg); box-shadow: 10px 10px 5px grey; } img:hover:nth-child(5) { transform: rotateY(180deg); } img:hover:nth-child(6) { transform: scale(1.2); } </style> </head<body> <div class="container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> <img src="image5.jpg"> <img src="image6.jpg"> </div> </body> </html>
标签:hover,img,transform,1111,nth,rotate,child From: https://www.cnblogs.com/nclg-caigou/p/17434633.html