鼠标未放到图片上的效果：
鼠标放到图片上后的效果：放大的过程是有动画过渡的，这个过渡的时间可以自定义
<!DOCTYPE html>
<html lang="en">
<head>
<style media="screen">
.warp {
width: 540px;
height: 540px;
border: 1px solid #333;
margin: 50px auto;
overflow: hidden;
}
img {
cursor:pointer;
/*<!-- css手壮样式 -->*/
transition: all 0.6s ease 0s;
/*<!-- 过渡:名称、过渡时间、曲线变化、何时开始 -->*/
}
img:hover{
transform: scale(1.4);
/*<!-- 2D变形:缩放1.4倍 -->*/
}
</style>
</head>
<body>
<div class="warp">
<img src="WechatIMG16.jpg" alt="">
</div>
</body>
</html>transition 曲线变化的运动规律：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
1379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
