HTML5图片缩放案例

最新推荐文章于 2021-06-19 02:19:40 发布

四夕520

最新推荐文章于 2021-06-19 02:19:40 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Luokaiqin520/article/details/79190455

这个HTML5案例展示了如何使用CSS实现图片的缩放效果。通过定义样式和动画关键帧，当鼠标悬停在左侧图片和右侧表格的图片上时，图片会按照预设的动画效果进行放大。案例中，左侧图片固定尺寸，右侧表格内的图片在悬停时动态缩放，增加了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>

#div{
width: 1000px;
height: 350px;
margin-top: 20px;
}

p{
line-height: 28px;
margin-top: -5px;
text-align: left;
font-size: 14px;
}

.left{
width: 300px;
height: 350px;
/*background: yellow;*/
float: left;
}

.left img{
width: 300px;
height: 300px;
}
#right{
width: 650px;
height: 350px;
/*background: blanchedalmond;*/
float: left;
margin-left: 10px;
}

#right img{
width: 200px;

}
table{
width: 650px;
height: 350px;
}

@-webkit-keyframes suo{

0%{
transform: scale(1.1,1.1);
}
30%{
transform: scale(1.2,1.2);
}
60%{
transform: scale(1.3,1.3);
}
100%{
transform: scale(1.5,1.5);
}

}

div .left:hover{
animation: suo 3s linear;
}

div #right table tr td:hover{
animation: suo 3s linear;
}
</style>
</head>
<body>

<center>

<div id="div">
<div class="left">
<img src="../sft_img0128/1.png"/>
<p >马蓉喊话王宝强<br />
小学生圣诞约女模看电影</p>
</div>
<div id="right">
<table>
<tr>
<td>
<img src="../sft_img0128/2.png"/>
<p >马蓉喊话王宝强<br />
小学生圣诞约女模看电影</p>
</td>
<td>
<img src="../sft_img0128/3.png"/>
<p >马蓉喊话王宝强<br />
小学生圣诞约女模看电影</p>
</td>
<td>
<img src="../sft_img0128/4.png"/>
<p >马蓉喊话王宝强<br />
小学生圣诞约女模看电影</p>
</td>
</tr>
<tr>
<td>
<img src="../sft_img0128/5.png"/>
<p >马蓉喊话王宝强<br />
小学生圣诞约女模看电影</p>
</td>
<td>
<img src="../sft_img0128/6.png"/>
<p >马蓉喊话王宝强<br />
小学生圣诞约女模看电影</p>
</td>
<td>
<img src="../sft_img0128/7.png"/>
<p >马蓉喊话王宝强<br />
小学生圣诞约女模看电影</p>
</td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>