欢迎访问:我爱bear - 你可记得 三月初 初相遇雨橙 我曾忆起 初春时 时景逢雨萱
  
你现在的位置: 首页 脚本样式 正文
简单CSS实现网站图片添加移入放大、移出缩小特效

网站有图片的时候,往往需要添加一点“炫酷”的方式,下面的方法可以简单的实现网站图片添加移入放大、移出缩小的特效,简单、不复杂,人见人爱,一看就懂的方法。

样式代码:

<style>
    /* 设置父级尺寸,超出隐藏 */
    .main{ width:300px; height:300px; overflow:hidden;}
    /* 图片尺寸设置 */
    .main img{ width:300px; height:300px;}
    /* 图片移入、移出特效 */
    .main img{
        transition:transform 0.9s;
        -moz-transition:-moz-transform 0.9s;
        -webkit-transition:-webkit-transform 0.9s;
        -o-transition:-o-transform 0.9s;
    }
    .main img:hover{
        transform:scale(1.4);
        -moz-transform:scale(1.4);
        -webkit-transform:scale(1.4);
        -o-transform:scale(1.4);
    }
</style>

html代码:

<div class="main">
    <img src="http://5ibear.com/zb_users/upload/2017/12/20171201103629151209578988381.jpg" />
</div>

完整代码如下:

<html>
    <head>
        <meta charset="UTF-8">
        <title>网站图片添加移入放大、移出缩小特效</title>
        <style>
            /* 设置父级尺寸,超出隐藏 */
            .main{ width:300px; height:300px; overflow:hidden;}
            /* 图片尺寸设置 */
            .main img{ width:300px; height:300px;}
            /* 图片移入、移出特效 */
            .main img{
                transition:transform 0.9s;
                -moz-transition:-moz-transform 0.9s;
                -webkit-transition:-webkit-transform 0.9s;
                -o-transition:-o-transform 0.9s;
            }
            .main img:hover{
                transform:scale(1.4);
                -moz-transform:scale(1.4);
                -webkit-transform:scale(1.4);
                -o-transform:scale(1.4);
            }
        </style>
    </head>
    <body>
        <div class="main">
            <img src="http://5ibear.com/zb_users/upload/2017/12/20171201103629151209578988381.jpg" />
        </div>
    </body>
</html>

图片及父级DIV尺寸根据需要设置,但是这样设置你会发现图片尺寸固定,图片就会被拉伸变型,这里可参照前面写的一篇文章解决:

传送门:图片根据父级自适应缩放水平或者垂直居中显示

发布日期:2017年12月28日 13:27:28     所属分类:脚本样式
版权声明:本文创建于 2 年 前,由 烟敛寒叶 发表,共 4296 字
转载请注明:简单CSS实现网站图片添加移入放大、移出缩小特效 (PS:如果是原创,哈哈。。。)
 
 
 
  
目前浏览:3091     暂无评论
该文章还没有评论,赶快抢占沙发吧!

  
网站简介
Z-blog 爱好者,个人博客粉丝,鼓捣主题制作,然而并不懂什么代码,乱乱唱。
本站建于 2010-04-26 已有 10 年
  • 文章总数:72
  • 页面总数:2
  • 分类总数:9
  • 标签总数:1
  • 评论总数:14
  • 浏览总数:203762
关于博客
5ibear 个人博客纯属个人娱乐博客,主要涵盖了天文地理、奇门遁甲、阴阳五行八卦及一切关乎于宇宙和平的 * *。博客“宗旨”:把个人制作累积的东东,分享给最需要的读者,“专研”主题制作,然而并不懂什么代码。乱乱唱,唱我们的歌,风在大,我们都在这儿。。。。
Copyright © 2016-2017 我爱bear 保留所有权利 基于 Z-blog 技术创建 Theme by 烟敛寒叶 渝ICP备10202287号-2
(若本站无意侵犯了您的版权,请邮件致 2679899860@qq.com 处理,谢谢!)
渝公网安备 50022502000121 号
歌曲 - 歌手
0:00