CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程,可以自定义)
2020-05-02 1691 分享

CSS3的transform:scale(1.4)可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性过渡时间。 这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发.

CSS3的transform:scale(1.4)可以实现按比例放大或者缩小功能。 
CSS3的transition允许CSS的属性过渡时间。
这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        div img{
            cursor: pointer;
            width:100%;
            height:100%
            transition: all 0.6s;
        }
        div img:hover{
            transform: scale(1.4);
        }
    </style>
</head>
<body>
<div>
    <img src="img/focus.png" />
</div>
</body>
</html>


相关推荐
css3鼠标悬浮图片左右摇晃
鼠标悬浮,图片左右摇晃
2020-05-022064分享
css3鼠标悬浮,盒子向上移动
鼠标悬浮,盒子向上移动
2020-05-022460分享
前端文字过多,以省略号自动截取
text-overflow: ellipsis;/*文本超出以...显示*/ overflow: hidden;/*超出盒子隐藏*/ white-space: nowrap;/*强制在第一行显示*/
2020-05-022120分享
CSS3 文字阴影
CSS3 文字阴影 text-shadow属性
2020-05-021919分享
HTML5表单list属性
<input type="text" list="url_list" > <datalist id="url_list">    <option value="测试">    <option value="数据">    <option value="不知道"> </datalist>
2020-05-021530分享
HTML5新增标记(有利于维护,以及浏览器解析,有利于搜索引擎爬取)
html新增常用标记(有利于维护,以及浏览器解析,有利于搜索引擎爬取)下面列出个别常用 :
2020-05-021499分享
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程,可以自定义)
CSS3的transform:scale(1.4)可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性过渡时间。 这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发.
2020-05-021692分享

联系站长 : 17620917002
站长邮箱 : 425158482@qq.com
问题咨询 : QQ 425158482
系统长期维护,放心使用

备案号:蜀ICP备19015811号-3

案例展示
电脑展示 手机展示
首页
系统
笔记
登录