chaihongjun.me

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

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

QQ截图20160628085234.jpg

而且这个图片放大只是缩放的一个效果,没有使图片的尺寸发生了变化。以前的做法可能是是使用JS去解决,比如使用Jquery插jquery.zoomImgRollover.js

在页面使用的时候先引入Jquery,然后再引入jquery.zoomImgRollover.js,最后再写入控制代码:

<html>
<!-- 中间省略... -->
<head>
<script src="../jquery.min.js"></script>  <!-- 引入JQ -->
<script src="../jquery.zoomImgRollover.js"></script> <!-- 引入zoomImgRollover -->
<script type="text/javascript">     <!-- 控制代码 --> 
$(document).ready(function(){    
	$(".img").zoomImgRollover();    <!-- ".img"换成需要缩放的图片class或者id --> 
});    
</script>    
</head>

看起来挺方便的,但是从页面的效果来说,需要加载的资源太多了,CSS能够做的事情就不劳烦JS了,下面是纯CSS3效果思路:

  1. 给定图片尺寸(width,height)

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

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

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 国际许可协议进行许可。作者:柴宏俊»