使用HTML+CSS动画属性让鼠标放在图片上让图片动起来

最新推荐文章于 2023-06-21 22:38:32 发布

qq_58135707

最新推荐文章于 2023-06-21 22:38:32 发布

阅读量2.2k

点赞数

文章标签：大数据前端 css html

本文链接：https://blog.csdn.net/qq_58135707/article/details/125544935

版权

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img1 {
            /* transform: scale(0.6); */
            float: left;
            margin-left: 10px;
           
        }
        .img2{
            /* transform: scale(0.65); */
            float: left;
            margin-left: 10px;
            
        }
        .img3{
            /* transform: scale(0.6); */
            float: left;
            margin-left: 10px;
            
        }
        .img4{
            /* transform: scale(0.6); */
           float: left;
           margin-left: 10px;
        }
        .img1 img{
        
            border-radius: 16px; 
            
        }
        img:hover{
           
           animation: m1 0.3s ease 100ms 2;
          
        }
       
        
        @keyframes m1{
            /* 0%{
                transform: scale(0.6);
            } */
            40%{
                transform: scale(1,0.8);
            }
            100%{
                transform: scale(0.8,1);
            }
            /* 100%{
                transform: scale(1);
            } */
           
        }
        .img2 img{
            border-radius: 16px;
            
        }
        .img3 img{
            border-radius: 16px;
        }
        .img4 img{
            border-radius: 16px;
        }
        p{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="img1">
            <img src="./图片排列/m1.jpg" >
            <p>猫和老鼠</p>
        </div>
        <div class="img2">
            <img src="./图片排列/m2.jpg" >
            <p>猫和老鼠</p>
        </div>
        <div class="img3">
            <img src="./图片排列/m3.jpg" >
            <p>猫和老鼠</p>
        </div>
        <div class="img4">
            <img src="./图片排列/m4.jpg" >
            <p>猫和老鼠</p>
        </div>
    </div>
</body>
</html>