【CSS3】鼠标HOVER图片缩放动画

admin · 发表于 2018-8-29 12:20:05

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                     div{
                              width: 300px;
                              height: 300px;
                              border: #000 solid 1px;
                              margin: 50px auto;
                              overflow: hidden;
                     }
                     div img{
                              cursor: pointer;
                              transition: all 0.6s;
                     }
                     div img:hover{
                              transform: scale(1.4);
                     }
            </style>
      </head>
      <body>
            <div>
                     <img src="img/focus.png" />
            </div>
      </body>
</html>

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。
transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。

注意事项：
transition: all 0.6s;设置在img，而不是在hover上，这样就可以实离开时也有.6s动画。

应用案例：qjs

		自动登录	找回密码
密码			立即注册