使用Firebug动态的查看元素的变化(HTML与CSS)
.blogs figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.blogs figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }CSS3标签中的transform：scale(图片缩放比例), 1代表原图显示, 1.1缩放1.1倍…
transform: 变形
scale: 缩放
tranistion: 过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3中的图片缩放特效</title>
<style type='text/css'>
figure img {
transition: all 0.5s ease 0s;
}
figure:hover img {
transform:scale(1.1);
}
</style>
</head>
<body>
<figure>
<p>CSS3中的图片缩放特效</p>
<img src='./Uploads/images/20160608150004RCvWvs.jpg' />
</figure>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)