过渡
    image.png

    image.png
    image.pngimage.png

    进度条案例

    1. <style>
    2.     .bar{
    3.         width: 150px;
    4.         height: 15px;
    5.         border: 1px solid green;
    6.         border-radius: 7px;
    7.     }
    8.     .bar_in{
    9.         width: 50%;
    10.         height: 100%;
    11.         background-color: green;
    12.         transition: all .7s;   
    13.     }
    14.     .bar:hover .bar_in{
    15.         width: 100%;
    16.     }
    17. </style>
    18. <body>
    19.    <div class="bar">
    20.        <div class="bar_in">
    22.        </div>
    23.    </div>
    24. </body>

    image.pngimage.png
    图像过渡

    <style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .hezi{
        width: 100px;
        height: 100px;
        /* margin-top: 200px;
        margin-left: 100px; */
        overflow: hidden;
        /* background-color:green; */
        border-radius: 35px;
        }
    .name2{
        width: 100px;
        height: 100px;
        transition:900ms;
    }
    .name4{
        width: 100px;
        height: 100px;
        border-radius: 35px;
    }
    .hezi:hover div{
        transform: translateY(-100%);
    }
</style>
<body>
    <div class="hezi">
        <div class="name1">
            <img src="../作业/小米1.png" alt="" class="name2">
        </div>
        <div class="name3">
            <img src="../作业/小米2.png" alt="" class="name4">
        </div>
   </div>
</body>

    image.png 当鼠标经过时 image.png