下面实现了鼠标放到图片上去,图片慢慢变大,鼠标移走,图片慢慢恢复。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标滑过图片效果</title>
<style type="text/css">
img{
display:inline-block;
width: 200px;
height: 200px;
}
.outer{
width: 200px;
height: 200px;
overflow: hidden;
float: left;
}
.inner{
transition: linear 0.3s;
}
.outer .inner:hover{
transform: scale(1.2);
}
.container{
margin: 0 auto;
border:#000 1px solid;
width: 800px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<img class="inner" src="img/1.jpg" />
</div>
<div class="outer">
<img class="inner" src="img/2.jpg" />
</div>
<div class="outer">
<img class="inner" src="img/3.jpg" />
</div>
<div class="outer">
<img class="inner" src="img/4.jpg" />
</div>
</div>
</body>
</html>
语法: transition: property duration timing-function delay;
示例: transition: width 0.6s linear 0.2s;
0.2s 后 width 属性在 0.6s 中以 匀速 的方式…
如果某些属性不写的话,浏览器将使用默认值。具体情况可以到浏览器中查看。
transition-property : 指定CSS属性的name,transition效果
transition-duration : transition效果需要指定多少秒或毫秒才能完成
transition-timing-function : 指定transition效果的转速曲线
transition-delay : 定义transition效果开始的时候