chaihongjun.me

纯CSS3实现鼠标经过图片缩放效果且不放大尺寸

   常常我们觉得一些页面动画效果需要用到JS的其实CSS3也都可以实现。我们在很多WP博客可以发现作者的文章列表页面也就是栏目页,当鼠标经过文章的缩略图的时候,图片有一个放大的效果。

纯CSS3实现鼠标经过图片缩放效果且不放大尺寸

  • 给定图片尺寸(width,height)

    img{width:200px,height:100px;}

  • 最重要的变化代码部分,给鼠标经过添加效果代码

  • img:hover{
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transition: all 1s ease 0s; 
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    }
    /*  transform 是CSS3的一个新特性,本意是变换,变形,转换等等
    关于transform是什么可以参考  大前端:CSS3详解:transform 
    scale是比例的意思,这里1.3那就是按照1.3的比例放大了,如果要变小,那就是负值
    transition 过度的意思,默认语法:
    transition: property duration timing-function delay;
    分别是过度效果是什么,过度效果一共有多久,转速效果,以及什么时候开始出现效果
    
    */

    3.给包裹图片的容器设置overflow:hidden;属性,目的是防止图片尺寸变大,该容器一定要是block属性。


    实例的话看本站代码即可:

    <article class="excerpt">
            <a class="focus" href="https://chaihongjun.me/html5_css3/css3/71.html">
              <img data-original="https://chaihongjun.me/uploads/allimg/20160627/1467019999783744.jpg" class="thumb" alt="鼠标经过文字,文字左偏移或者又偏移" src="https://chaihongjun.me/uploads/allimg/20160627/1467019999783744.jpg" style="display: inline;">
            </a>
            <header>
              <a class="cat" href="https://chaihongjun.me/html5_css3/css3/">
                css3 <i></i>
              </a>
              <h2>
                <a href="https://chaihongjun.me/html5_css3/css3/71.html">鼠标经过文字,文字左偏移或者又偏移</a>
              </h2>
            </header>
            <p class="meta">
              <time> <i class="fa fa-clock-o"></i>
                2016-06-27
              </time>
              <span class="pv">
                <i class="fa fa-eye"></i>
                阅读(
                <script src="https://chaihongjun.me/plus/click.php?view=yes&amp;aid=71&amp;mid=1" type="text/javascript" language="javascript"></script>133
                )
              </span>
            </p>
            <p class="note">常见的博客很多有这样一种效果,当鼠标移到博客列表标题的时候,标题文字会向右移动一定距离,当鼠标离开的时候又恢复。这样的操作其实非常简单,只要给包裹文字元素一个pad...</p>
          </article>
    .excerpt .thumb {   /* 图片尺寸 */
        width: 220px;
        height: 150px;
        }
    .excerpt .focus {
        float: left;
        margin-left: -235px;
        width: 220px;
        overflow: hidden;  /* 图片外层的容器,设置防止图片变大之后尺寸也变大,是允许图片局部缩放*/
        }
    .excerpt .thumb:hover {          /* 缩放效果代码 */
        transform: scale(1.3);
       -webkit-transform: scale(1.3);
       -moz-transform: scale(1.3);
       -ms-transform: scale(1.3);
       -o-transform: scale(1.3);
       transition: all 1s ease 0s; 
       -webkit-transition: all 1s ease 0s;
       -moz-transition: all 1s ease 0s;
       -ms-transition: all 1s ease 0s;
       -o-transition: all 1s ease 0s;
       }


    知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»