请选择 进入手机版 | 继续访问电脑版

弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 2341|回复: 0

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

[复制链接]
发表于 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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-3-29 18:06 , Processed in 0.084326 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表