艺灵设计

全部文章
×
当前位置：首页 >> css3动画>>鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)

鼠标滑过图片显示遮罩层特效集合(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做的单重轮播

相关文章

gulp实战技巧之gulp.spritesmith自css3动画教程之画对勾特效鼠标滑过遮罩特效鼠标滑过图片旋转180度特效-破解版tips提示框特效-破解版鼠标滑过换图特效-破解版鼠标滑过变亮特效-破解版js网页特效之鼠标移入时弹出隐藏内css3+js实现手机wap版炫酷旋转式放京东鼠标滑过变亮特效

评论区

我要评论

近期更新

权限破解之一键复制某sdn上的代码块 浅聊某sdn是如何实现未登录时屏蔽复制的 bug复盘之如何优雅的实现表格跨页勾选 记一次APP内调起微信支付时首次成功唤醒，后面 记一次注销联通卡的吐血经历 2023年敬业福获取方法 bug复盘之除数为0会怎样？ Vite2项目优化之线上功能有异常，如何快速排查 bug复盘之Vite2项目在线上报错，修复后却意外发 工具分享之图片压缩

热门标签

微信小程序 小程序 用户体验 uni-app gulp教程 @vuecli3 vue.js 路由守卫 vuex vue项目实战 路由 自动化构建 破解 网站管理系统 ajax php二次开发 在线生成 京东装修 破解淘宝css权限 jquery插件制作 淘宝店铺装修教程 ie6 bug jquery特效 css3 注册插件 源码分享 悬浮代码 视频教程 全屏模板框架 footer-more-trigger 鼠标滑过特效 sn-simple-logo 淘宝店铺装修经验汇总 喜欢代码 弹出层 宝贝分享代码 购物车代码 登陆插件 宝贝收藏代码 详情页全屏 天猫关注带数字 导航特效 遮罩层特效 修改淘宝销量 flash动画 模块下10px问题 二级下拉菜单 轮播特效 京东店铺装修 插件下载 淘宝漏洞 鼠标跟随 隐藏的店招/模块 css3边框阴影 赚积分

点击排行

2016淘宝完全自定义css工具淘宝天猫2016最新css悬浮工具淘宝基础版店铺自由编辑页头页面工具淘宝基础版店铺自主授权工具淘宝基础版店铺真正去除页头10px工具2016淘宝天猫全屏全家桶工具淘宝基础版店铺自由编辑页尾工具为了抓包某app,我折腾了10天,原来他是这样防抓包的纯css实现超宽图片全屏居中（兼容淘宝店铺）css3边框阴影效果

站长推荐

在线生成软件帮助文档实现淘宝基础版详情页导航全屏背景的方法第二期:玩转淘宝店铺装修网站部分文章更新动态一览表淘宝天猫店铺装修问题与技巧性经验汇总淘宝Widget库中轮播特效从入门到精通曝淘宝网往期改销量多处漏洞淘宝卖家有无必要开通css纯css实现超宽图片全屏居中（兼容淘宝店铺）鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)
关于艺灵网站地图艺灵团队
Copyright © 2012 - 2022 艺灵设计, all rights reserved. 技术支持：艺灵设计 网站备案：豫ICP备13015019号
特别申明：本站内容仅供个人学习参考，不做其它用途。