使用CSS3实现图片悬停放大的特效

作者:课课家教育更新于： 2016-10-10 15:19:36

        图片浏览器相信大家已经见过不少，Windows用缩略图模式查看图片从某种意义上也算是一款图片浏览器。这类应用重点往往在于功能，界面比较单调，鼠标移上时没有任何效果。点击的时候背景高亮显示，代表图片被选中，期间没有任何过渡，对用户缺乏吸引力。

　　本教程我们就来学习如何用css3来美化这类应用。先来看看效果，默认情况下图片变暗，鼠标移到图片上时，图片会变亮（实际上是恢复初始状态），并且在图片周围显示一个模糊的光圈，整个过程不是突变，而是缓动。跟直接出现一个高亮背景相比，效果是不是高大上了不少？

　　我们把要展示的图片都放在html文件所在目录下的images文件夹，然后就开始构建基础的html代码。

　　为了更好地区分图片和背景，我们给img加一个1像素的边框，颜色为白色，跟背景的黑色拉开对比。

　　这里我们就对class=img的元素内部的img元素设置这个样式。

　　.imgimg{

　　border:1px solid #fff;

　　}

　　感觉不是很好看，我们平时看到的电子相册，图片一般都跟边框有个边距，所以这里我们也加一下。

　　.imgimg{

　　/*其它样式代码省略*/

　　padding:10px;

　　}

　　现在感觉比较好了，如下图所示:

　　由于悬停需要放大，然后我们使用的是位图（像素图片），因此放大会明显失真，所以在放大前我们希望它缩小。可以看到，我们用一个mask来做变暗的效果，显然mask也要跟着缩小，所以这里要改样式的是class=img的外层div。

　　缩小用CSS3的transform属性即可轻松搞定。

　　.img{

　　float:left;

　　-webkit-transform:scale(0.6);

　　-moz-transform:scale(0.6);

　　-o-transform:scale(0.6);

　　transform:scale(0.6);

　　}

　　下面4行代码功能一致，不同前缀用于兼容不同的浏览器。

　　scale(0.6)代表缩放比例为60%，它会同时应用于水平和垂直方向，想要在两个方向上有不同的缩放比率，方法是多传一个比例，然后用英文逗号分隔。

　　运行效果如下:

　　此处我们用一个mask来做变暗的效果，跟直接设置透明度相比，它更加灵活，因为层除了淡入淡出，还支持缩放，所以能做的效果就可以多很多。

　　这时候，mask和图片有重叠，因此class=img一层需要用相对定位，而内部的元素则使用绝对定位。

　　因为变暗不是完全遮挡，所以mask带有一定的透明度。

　　综上所述，我们让mask覆盖整个图片，并设置alpha=60%的黑色。

　　.img.mask{

　　width:100%;

　　height:100%;

　　background-color:#000;

　　position:absolute;

　　top:0px;

　　left:0px;

　　opacity:0.6;

　　}

　　再次运行，图片“变暗”了:

　　接着，我们让鼠标移上去的时候图片变亮，你会发现，有多个属性都可以达到这个效果，比如opacity=0，或者width，height=0%。opacity=0是淡出，直接操作img也能实现。为了突出mask的优势，我们让height=0%试试。

　　这个变化在鼠标悬停时执行，所以用的是hover伪类。

　　.img:hover.mask{

　　height:0%;

　　}

　　再次运行，鼠标移到图片上时，图片就亮回来了。

　　然后我们还希望它可以放大，这就需要使用transform属性了，让0.6变成0.8。

　　.img:hover{

　　-webkit-transform:scale(0.8);

　　-moz-transform:scale(0.8);

　　-o-transform:scale(0.8);

　　transform:scale(0.8);

　　}

　　之所以不弄到1，是为了方便大家自由发挥，在制作过渡效果的时候可以在一定范围内使用弹性过渡而不会导致缩放比例大于1。

　　再次运行，鼠标移到图片上的效果如下图所示:

　　然后，我们再来加一个渐变光圈，使用的是box-shadow属性。

　　具体写法如下

　　box-shadow:0px 0px 30px #ccc;

　　前两个参数代表“阴影”在水平和垂直方向上的偏移量，一般来说，发光不需要偏移。第三个参数代表光圈大小，这里设置为30px。最后一个是“阴影”颜色，这里用的是浅灰色，在黑色背景下看起来就是白光，但是又不会太刺眼。

　　同样的，我们要为不同浏览器编写不同的前缀。

　　.img:hover{

　　/*其它样式代码省略*/

　　-webkit-box-shadow:0px 0px 30px #ccc;

　　-o-box-shadow:0px 0px 30px #ccc;

　　-moz-box-shadow:0px 0px 30px #ccc;

　　box-shadow:0px 0px 30px #ccc;

　　}

　　再次运行，效果如下图所示:

　　现在，两个状态是直接切换，没有任何过渡效果，比较突兀。这时候又该请上强大的CSS3动画了。方法很简单，给要进行过渡的元素设置transition属性，指定两个状态过渡的总时间。本例需要实现过渡的有class=img的div，以及mask元素。

　　transition也要兼容不同浏览器。

　　.img{

　　/*其它样式代码省略*/

　　-webkit-transition:0.5s;

　　-moz-transition:0.5s;

　　-o-transition:0.5s;

　　transition:0.5s;

　　}

　　.img.mask{

　　/*其它样式代码省略*/

　　-webkit-transition:0.5s;

　　-moz-transition:0.5s;

　　-o-transition:0.5s;

　　transition:0.5s;

　　}

　　再次运行，过渡效果就出来了。可以发现，height=0%的状态会实现一个垂直擦除的效果

　　如果换成width=0%，则过渡状态会发生如下图所示的变化，擦除方向从垂直变为水平

　　而若让opacity=0，那么效果就是淡入淡出了

　　其中，前两种变换不依赖于mask层，直接修改img是很难做得到的，所以使用mask可以为我们发挥创意提供了更大的空间。

　　Windows图片浏览器单调的交互效果可能早就让大家为之厌烦。这时候我们可能会想着伸个懒腰，或者出去走走来让自己放松一下。然而回来了也还是得对着这古板的玩意儿继续工作，所以这时候，要是能照着本教程把过渡效果实现出来，好好欣赏一番，甚至用到你们的产品上，那是不是就能让你的心情变得更加愉快呢？