艺灵设计

全部文章
×

鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-10-10 11:45:07 - 阅: - 评:0 - 积分:0

在网上浏览图片时经常会看到鼠标滑过时出现一层半透明背景的图层遮挡住了图片,给人一种神秘感。笔者称之为遮罩层,以后文章中都以遮罩层代指。

在很久以前,设计师们设计的好看的特效在我们前端“攻城师”的手中都要借助js/jq来进行实现,兼容性有高有低。如果那时你想利用纯粹的css来实现的话,案例是少之又少。但换作是现在的话,那就是小菜一碟。css3的出现就如同给纯css插上了放飞的翅膀一样,完美的实现了炫酷动画的突破!接下来就献上笔者用css3之transition属性写的16种遮罩层特效,希望读者喜欢。放张效果图:

源码如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
  7. <meta name="keywords" content="遮罩层特效,半透明背景,鼠标特效,transition,css3旋转">
  8. <meta name="description" content="遮罩层特效,半透明背景,鼠标特效,transition,css3旋转">
  9. <style type="text/css">
  10. *{margin:0; padding:0}
  11. .clear{clear:both; line-height:0;overflow:hidden;}
  12. ul{list-style:none;margin:0 auto;padding:5px;width:1182px;}
  13. ul li{float:left;text-align:center;margin:5px;_display:inline;overflow:hidden;position:relative;z-index:10; cursor:pointer;}
  14. ul li img{width:384px; height:512px; vertical-align:top;}
  15. ul li span{display:block;width:384px;height:512px;background:#000;filter:alpha(opacity=40);opacity:.4; position:absolute;z-index:11;}
  16. ul li b{color:#fff;display:block;width:100%;position:absolute;top:10px;z-index:12}
  17. ul li:nth-child(1) span{top:0;left:100%;-webkit-transition:left .4s ease-out;-moz-transition:left .4s ease-out;-o-transition:left .4s ease-out;-ms-transition:left .4s ease-out;transition:left .4s ease-out;}
  18. ul li:nth-child(1):hover span{left:0%;}
  19. ul li:nth-child(2) span{top:0;right:100%;-webkit-transition:right .4s ease-out;-moz-transition:right .4s ease-out;-o-transition:right .4s ease-out;-ms-transition:right .4s ease-out;transition:right .4s ease-out;}
  20. ul li:nth-child(2):hover span{right:0%;}
  21. ul li:nth-child(3) span{left:0;top:100%;-webkit-transition:top .4s ease-out;-moz-transition:top .4s ease-out;-o-transition:top .4s ease-out;-ms-transition:top .4s ease-out;transition:top .4s ease-out;}
  22. ul li:nth-child(3):hover span{top:0%;}
  23. ul li:nth-child(4) span{left:0;bottom:100%;-webkit-transition:bottom .4s ease-out;-moz-transition:bottom .4s ease-out;-o-transition:bottom .4s ease-out;-ms-transition:bottom .4s ease-out;transition:bottom .4s ease-out;}
  24. ul li:nth-child(4):hover span{bottom:0%;}
  25. ul li:nth-child(5) span{left:0;top:0;opacity:0;-webkit-transition:opacity .4s ease-out;-moz-transition:opacity .4s ease-out;-o-transition:opacity .4s ease-out;-ms-transition:opacity .4s ease-out;transition:opacity .4s ease-out;}
  26. ul li:nth-child(5):hover span{opacity:.4}
  27. ul li:nth-child(6) span{left:0;top:0;opacity:.4;-webkit-transition:opacity .4s ease-out;-moz-transition:opacity .4s ease-out;-o-transition:opacity .4s ease-out;-ms-transition:opacity .4s ease-out;transition:opacity .4s ease-out;}
  28. ul li:nth-child(6):hover span{opacity:0}
  29. ul li:nth-child(7) span{left:-100%;top:-100%;-webkit-transition:left .4s ease-out,top .4s ease-out;-moz-transition:left .4s ease-out,top .4s ease-out;-o-transition:left .4s ease-out,top .4s ease-out;-ms-transition:left .4s ease-out,top .4s ease-out;transition:left .4s ease-out,top .4s ease-out;}
  30. ul li:nth-child(7):hover span{left:0;top:0;}
  31. ul li:nth-child(8) span{left:100%;top:-100%;-webkit-transition:left .4s ease-out,top .4s ease-out;-moz-transition:left .4s ease-out,top .4s ease-out;-o-transition:left .4s ease-out,top .4s ease-out;-ms-transition:left .4s ease-out,top .4s ease-out;transition:left .4s ease-out,top .4s ease-out;}
  32. ul li:nth-child(8):hover span{left:0;top:0;}
  33. ul li:nth-child(9) span{left:100%;top:100%;-webkit-transition:left .4s ease-out,top .4s ease-out;-moz-transition:left .4s ease-out,top .4s ease-out;-o-transition:left .4s ease-out,top .4s ease-out;-ms-transition:left .4s ease-out,top .4s ease-out;transition:left .4s ease-out,top .4s ease-out;}
  34. ul li:nth-child(9):hover span{left:0;top:0;}
  35. ul li:nth-child(10) span{left:-100%;top:100%;-webkit-transition:left .4s ease-out,top .4s ease-out;-moz-transition:left .4s ease-out,top .4s ease-out;-o-transition:left .4s ease-out,top .4s ease-out;-ms-transition:left .4s ease-out,top .4s ease-out;transition:left .4s ease-out,top .4s ease-out;}
  36. ul li:nth-child(10):hover span{left:0;top:0;}
  37. ul li:nth-child(11) span{left:50%;top:50%;margin:-50% 0 0 -50%;-webkit-transform:scale(.001);-moz-transform:scale(.001);-o-transform:scale(.001);-ms-transform:scale(.001);transform:scale(.001);-webkit-transition:-webkit-transform .4s ease-out;-moz-transition:-moz-transform .4s ease-out;-o-transition:-o-transform .4s ease-out;-ms-transition:-ms-transform .4s ease-out;transition:transform .4s ease-out;}
  38. ul li:nth-child(11):hover span{-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-o-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);}
  39. ul li:nth-child(12) span{left:0;top:0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition:-webkit-transform .4s ease-out;-moz-transition:-moz-transform .4s ease-out;-o-transition:-o-transform .4s ease-out;-ms-transition:-ms-transform .4s ease-out;transition:transform .4s ease-out;}
  40. ul li:nth-child(12):hover span{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}
  41. </style>
  42. </head>
  43. <body>
  44. <h3 style="text-align:center">鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)【建议使用chrome,ff,opera,淘宝等非ie内核的浏览器进行浏览】</h3>
  45. <ul>
  46. <li><img src="/d/file/css3/2013-10-10/第一天.jpg" /><span></span><b>1.位移(右→左)</b></li>
  47. <li><img src="/d/file/css3/2013-10-10/老二占领右食槽.jpg"/><span></span><b>2.位移(左→右)</b></li>
  48. <li><img src="/d/file/css3/2013-10-10/三只小鼠.jpg" /><span></span><b>3.位移(下→上)</b></li>
  49. <li><img src="/d/file/css3/2013-10-10/可怜的老三.jpg" /><span></span><b>4.位移(上→下)</b></li>
  50. <li><img src="/d/file/css3/2013-10-10/老二进食中.jpg" /><span></span><b>5.淡入(无→有)</b></li>
  51. <li><img src="/d/file/css3/2013-10-10/老大喝水中.jpg" /><span></span><b>6.淡出(有→无)</b></li>
  52. <li><img src="/d/file/css3/2013-10-10/初次挑逗中.jpg" /><span></span><b>7.缩放(左上→右下)</b></li>
  53. <li><img src="/d/file/css3/2013-10-10/老二进食特写.jpg" /><span></span><b>8.缩放(右上→左下)</b></li>
  54. <li><img src="/d/file/css3/2013-10-10/继续挑逗中.jpg" /><span></span><b>9.缩放(右下→左上)</b></li>
  55. <li><img src="/d/file/css3/2013-10-10/继续用指甲挑逗.jpg" /><span></span><b>10.缩放(左下→右上)</b></li>
  56. <li><img src="/d/file/css3/2013-10-10/被咬了一口.jpg" /><span></span><b>11.中心缩放(小→大),<br />12.中心缩放(大→小)同理,略去</b></li>
  57. <li><img src="/d/file/css3/2013-10-10/完结.jpg" /><span></span><b>13.旋转(左上→左下),<br />14-16.其它三个方向同理,略去</b></li>
  58. <div class="clear"></div>
  59. </ul>
  60. </body>
  61. </html>

点此下载→→【代码】鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选).zip  

点击上面的“运行代码”后你可以在新页面看到css3实现的超炫遮罩层效果。当然,这一切的前提是在非ie内核浏览器的情况下了。页面中共12张图片,每一张在鼠标滑过时都会出现不同的浆果,最后两张图片上面有提示说明 ,剩下4种效果同理。至于是如何实现的,这个就不再多说了,前面的文章中也详细提及过,此文章只是在前面的基础上进行深入变形而已。如果读者朋友看源码后仍不明白,可使劲撮本站导航中的"资源下载",里面有好多资源哦!想下哪个就下哪个,css3手册必下哦!︿v︿

注:本文预期效果的思路与方法均为个人观点,不代表大众,准确性不做保证,以实现最终效果为标准!代码仅供读者参考。请在非ie内核浏览器下进行浏览,推荐chrome浏览器

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/css3/2013-10-10/83.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 遮罩层特效 半透明背景 鼠标滑过特效 transition css3旋转动画

上一篇: css3之transition实现有立体感的导航   下一篇: 纯css3做的单重轮播

评论区