1111-JZTXT

<!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>