鼠标放到图片上,图片会放大的动画效果css

鼠标放到图片上,图片会放大的动画效果css

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .hot-font{
            float: left;
            margin-top: 30px;
        }
        .hot-font img{
            margin-bottom:20px;
            cursor:pointer;    /*光标放在图片上的形状(一只手)*/
        }
        .hot-font:hover img{
        /*伪类 :hover 鼠标滑过之后给img 添加动画名称,1s表示所有效果在1s以内完成*/
            animation: run 1s;
        }
        /*创建动画*/
        @keyframes run{
        /*创建动画帧关键字 动画名称 run*/
            0%{ transform:scale(0.8);}
            25%{transform:scale(1.2);}
            50%{transform:scale(1);}
            70%{transform:scale(1.1);}
            100%{transform:scale(1);}
        }
    </style>
    <div id="bg-pic02" s>
        <div class="hot-pic">
            <div class="hot-font">
                <img src="./img/首页热门展示/1.png">
            </div>
            <div class="hot-font">
                <img src="./img/首页热门展示/2.png">
            </div>
            <div class="hot-font">
                <img src="./img/首页热门展示/3.png">          
            </div>
            <div class="hot-font">
                <img src="./img/首页热门展示/4.png">           
            </div>
            <div class="hot-font">
                <img src="./img/首页热门展示/5.png">              
            </div>
            <div class="hot-font">
                <img src="./img/首页热门展示/6.png">              
            </div>
        </div>       
    </div>
</body>
</html>

效果图
在这里插入图片描述鼠标放上去之后

在这里插入图片描述
我弄得效果是鼠标放上去,图片会弹几下,你可以根据自己需求调整 0%{ transform:scale(0.8);}里面的数值来得到自己想要的效果

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读