鼠标放到图片上,图片会放大的动画效果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);}里面的数值来得到自己想要的效果