常常我们觉得一些页面动画效果需要用到JS的其实CSS3也都可以实现。我们在很多WP博客可以发现作者的文章列表页面也就是栏目页,当鼠标经过文章的缩略图的时候,图片有一个放大的效果。
而且这个图片放大只是缩放的一个效果,没有使图片的尺寸发生了变化。以前的做法可能是是使用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效果思路:
给定图片尺寸(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&aid=71&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; }