变形 - 简书

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变形</title>
    <style type="text/css">
        body{
            background-color: white;
        }
        .box1,.box2,.box3,.box4{
            width: 200px;
            height: 250px;
            text-align: center;
            color: black;
            float: left;
            margin: 50px 10px;
        }
        .box1 div,.box2 div,.box3 div,.box4 div{
            width: 150px;
            height: 150px;
            border: 7px solid black;
            overflow: hidden;
            margin: 20px auto;
            border-radius: 10px;
            transition: all 1s linear;
        }
        .box1 div{
            background-image: url(1.jpg);
            background-size: 100% 120%;
        }
        .box2 div{
            background-image: url(2.jpg);
            background-size: 100% 120%;
            background-repeat: no-repeat;
        }
        .box3 div{
            background-image: url(3.jpg);
            background-size: 100% 120%;
        }
        .box4 div{
            background-image: url(4.jpg);
            background-size: 100% 120%;
        }
        .box1 div:hover{
            border-radius:50%;
            box-shadow: 0 0 10px white;
        }
        .box2 div:hover{
            background-size: 200% 240%;
            box-shadow: 0 0 10px white;
        }
        .box3 div:hover{
            transform: rotate(360deg);
            box-shadow: 0 0 10px white;

        }
        .box4 div:hover{
            filter:grayscale(1);
            box-shadow: 0 0 10px white;
        }
    </style>
</head>
<body>
<div class="box1">
    <span>变形</span>
    <div></div>
</div>
<div class="box2">
    <span>放大</span>
    <div></div>
</div>
<div class="box3">
    <span>旋转</span>
    <div></div>
</div>
<div class="box4">
    <span>变色</span>
    <div></div>
</div>
</body>
</html>