CSS实现--鼠标划入

骑猪看日落 2022-12-09 03:30 146阅读 0赞

还是先上效果图，看看是不是大家所需要的这种效果

![20200921195205894.gif][]没什么过程直接上代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
            }
            .box{
                width: 440px;
                height: 320px;
                position: relative;
                overflow: hidden;
                display: inline-block;
            }
            /* 图片变化 */
            .box:hover img{
                transform:scale(2) rotate(45deg)
            }
            
            .box img{
                transition: all 0.5s;
            }
            .small{
                width: 400px;
                height: 280px;
                background-color:#00bcd438;
                position: absolute;
                top:20px;
                left: 20px;
                
                transition: all 0.5s;
                opacity: 0;
                transform: rotate(180deg)scale(1.5);
            }
            /* 透明块 */
            .box:hover .small{
                opacity: 1;
                transform:rotate(0deg) scale(1);
            }
            .text-box{
                position: absolute;
                left: 0;
                top: 115px;
                width: 440px;
                text-align: center;
                font-size: 30px;
                color: white;
                transform: scale(2);
                opacity: 0;
                transition: all 1s;
            }
             /* 文字 */
            .box:hover .text-box{
                transform: scale(1);
                opacity: 1;
            }
            
    
        </style>
    </head>
    <body>
        <div class="box">
            <img src="images/img-1.jpg" alt="">
            <div class="small"></div>
            <div class="text-box">
                <p class="title">KRISTINA</p>
                <p>Web Designer</p>
            </div>
        </div>
        <div class="box">
            <img src="images/img-2.jpg" alt="">
            <div class="small"></div>
            <div class="text-box">
                <p class="title">KRISTINA</p>
                <p>Web Designer</p>
            </div>
        </div>
        <div class="box">
            <img src="images/img-3.jpg" alt="">
            <div class="small"></div>
            <div class="text-box">
                <p class="title">KRISTINA</p>
                <p>Web Designer</p>
            </div>
        </div>
    </body>
    </html>

分清楚变化的三部分就好啦

[20200921195205894.gif]: /images/20221123/0aeeb8280f364a9194acedc8edd5485e.png