简单的鼠标经过图片时变大，IE低版本浏览器不兼容

CSS3过渡效果详解

最新推荐文章于 2018-04-21 14:36:21 发布

原创最新推荐文章于 2018-04-21 14:36:21 发布 · 519 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了如何使用CSS3过渡效果来实现元素样式的平滑变化。通过设置宽度、高度等属性的变化时长，可以轻松地创建出丰富的视觉效果。文章提供了一个具体的示例，展示了当鼠标悬停在图片上时，图片大小变化的过渡效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

规定您希望把效果添加到哪个 CSS 属性上

规定效果的时长

多项改变

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

如：

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
img{
width:160px;
height:260px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s;
-o-transition:width 2s, height 2s;
-webkit-transition:width 2s, height 2s;
}
img:hover{
width:300px;
height:430px;
}
</style>
</head>

<body>
<div>
<img src="20160617113648970cx.jpg" />
</div>
</body>
</html>