艺灵设计

全部文章
×
当前位置：首页 >> css3动画>>纯css做的炫酷图片墙特效

纯css做的炫酷图片墙特效

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-10-14 11:13:29　-　阅:　-　评:1　-　积分:0

昨日无意间浏览了几个国外的网站，不得不佩服国外牛人的思维是多么的活跃，一个个神作让我惊呆许久......

自我感觉：国外牛人就是喜欢折腾，能用css做的事情绝不用js/jquery来做。而那些在我们第一眼看来只有js/jquery才能完成的事情在他(她)们眼里，那都不是事儿！如果我只说用css3来替代js/jquery的话，那未免有点小题大作了。好了，不卖关子了，还是先来看一具体实例吧，实例如下：

我相信很多读者在第一眼看上去时可能会是这种布局：外面一个“<a>”标签或其它标签，里面是“<img>”标签和纯文本或者是一个“<span>”或者其它包含文本的标签。事实上，当我第一眼看上去的时候也是这么认为的。但是，当我看了源码后才发现源码中根本就没有发现文本以及包含文本的标签！我惊呆了！

什么？没有文本也没有文本标签？那图片下面的标题是从哪里冒出来的呢？再仔细查看源码会发现“<img>”标签后面会有一个伪对象“:after”。也许你猜到了什么，恭喜你，答对了。事实上这些文本确实是通过这些伪对象“:after”来添加的，此时你可能会想到：如果这里有上百张图片，难道我需要写上百个对应的文本内容？答案肯定是错的了，这才是这个作品的独特之处！

看源码你会发现这里只写了一个“:after”就实现了所有图片的文本标题，神奇吗？核心源码如下：

  1. .ylsj-photo_w a:after{content:attr(title)}

对于这句不理解的话我们可以查看《css参考手册》
语法：
content：normal | none | [<attr> | <url> | <string> | ......
取值：
<attr>： 插入标签属性值
这样的话，我们只需要在对应的a标签处写上对应的“title”或“alt”等其它标签属性即可成功实现图片下面展示对应的文本了，是不是很简洁？！

下面再来看看重新这个作品的效果，你会发现这些图片墙上的图片悬挂的角度不同，这样才能彰显其个性。那么问题来了，难道我需要对每一个图片都写样式进行角度控制吗？当然不是了，这个时候又一个属性派上用场了---“E:nth-child(n)”。

这里需要用到一个css3的伪类选择符，但是我们平时很少用到，起码我是这样的。下面再来看看国外牛人是如何折腾此属性的。相关核心代码如下：

  1. /* By default, we tilt all our images -2 degrees */
  2. .ylsj-photo_w a {-webkit-transform:rotate(-2deg);transform:rotate(-2deg);}
  3. /* Rotate all even images 2 degrees */
  4. .ylsj-photo_w a:nth-child(even){-webkit-transform:rotate(2deg);transform:rotate(2deg);}
  5. /* Don't rotate every third image, but offset its position */
  6. .ylsj-photo_w a:nth-child(3n){-webkit-transform:none;transform:none;top:-5px;}
  7. /* Rotate every fifth image by 5 degrees and offset it */
  8. .ylsj-photo_w a:nth-child(5n){-webkit-transform:rotate(5deg);transform:rotate(5deg);right:5px;}
  9. /* Keep default rotate for every eighth, but offset it */
  10. .ylsj-photo_w a:nth-child(8n){top:8px;right:5px;}
  11. /* Keep default rotate for every eleventh, but offset it */
  12. .ylsj-photo_w a:nth-child(11n){top:3px;left:-5px;}
  13. .ylsj-photo_w a:hover {-webkit-transform:scale(1.25);transform:scale(1.25);box-shadow:0 3px 6px rgba(0,0,0,.5);z-index:5;}

我们还是对照着手册来看比较好理解一些
语法：
E:nth-child(n){ sRules }
取值：
匹配父元素的第n个子元素E
手册上写的比较简单(，jquery手册上的此属性会稍微详细些)，从国外牛人的代码中可以看出这里的值可以用“奇(odd)偶(even)”的写法表示，当然也可以用曾经我们数学中的“4n+1”这种类似的写法来按照一定的规律指定图片的旋转角度，具体的读者可以自由发挥。

最后，为了让图片更加好看可以设置“圆角”，“阴影”，“鼠标滑过动画”等效果让图片更加炫酷的展示出来。最后提一点小建议，图片墙放旅行照片不错力哦！^o^

案例完整代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>纯css做的炫酷图片墙特效---艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
  7. <meta name="keywords" content="纯css图片墙,炫酷图片墙特效,:after,:nth-child,css3旋转,鼠标滑过动画">
  8. <style type="text/css">
  9. .clearfix:after{content:"";clear:both;overflow:hidden;font-size:0;display:block}
  10. .clearfix{*zoom:1}
  11. .ylsj-photo_w a{background:#fff;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align:center;font-family:微软雅黑;text-decoration:none;color:#333;font-size:18px;;position:relative;box-shadow:0 3px 6px rgba(0,0,0,.25);-webkit-transform:rotate(-2deg);transform:rotate(-2deg);-webkit-transition:-webkit-transform .15s linear;transition:transform .15s linear;}
  12. .ylsj-photo_w a:after{content:attr(title);}
  13. .ylsj-photo_w a img{display:block;margin-bottom:12px;border:0}
  14. /* By default, we tilt all our images -2 degrees */
  15. .ylsj-photo_w a {-webkit-transform:rotate(-2deg);transform:rotate(-2deg);}
  16. /* Rotate all even images 2 degrees */
  17. .ylsj-photo_w a:nth-child(even){-webkit-transform:rotate(2deg);transform:rotate(2deg);}
  18. /* Don't rotate every third image, but offset its position */
  19. .ylsj-photo_w a:nth-child(3n){-webkit-transform:none;transform:none;top:-5px;}
  20. /* Rotate every fifth image by 5 degrees and offset it */
  21. .ylsj-photo_w a:nth-child(5n){-webkit-transform:rotate(5deg);transform:rotate(5deg);right:5px;}
  22. /* Keep default rotate for every eighth, but offset it */
  23. .ylsj-photo_w a:nth-child(8n){top:8px;right:5px;}
  24. /* Keep default rotate for every eleventh, but offset it */
  25. .ylsj-photo_w a:nth-child(11n){top:3px;left:-5px;}
  26. .ylsj-photo_w a:hover {-webkit-transform:scale(1.25);transform:scale(1.25);box-shadow:0 3px 6px rgba(0,0,0,.5);z-index:5;}
  27. </style>
  28. </head>
  29. <body>
  30. <div class="ylsj-photo_w clearfix">
  31. <a href="/css3" title="新加坡"><img src="/css3/2014-10-14/1.jpg" /></a>
  32. <a href="/div" title="名古屋"><img src="/css3/2014-10-14/2.jpg" /></a>
  33. <a href="/code" title="迪拜"><img src="/css3/2014-10-14/3.jpg" /></a>
  34. <a href="/zxsc" title="澳门"><img src="/css3/2014-10-14/4.jpg" /></a>
  35. <a href="/jquery" title="香港"><img src="/css3/2014-10-14/5.jpg" /></a>
  36. <a href="/html5" title="首尔"><img src="/css3/2014-10-14/6.jpg" /></a>
  37. <a href="/flash" title="泰国"><img src="/css3/2014-10-14/7.jpg" /></a>
  38. <a href="/xwzj" title="巴黎"><img src="/css3/2014-10-14/8.jpg" /></a>
  39. <a href="/code" title="新加坡"><img src="/css3/2014-10-14/1.jpg" /></a>
  40. <a href="/zxsc" title="迪拜"><img src="/css3/2014-10-14/3.jpg" /></a>
  41. <a href="/div" title="澳门"><img src="/css3/2014-10-14/4.jpg" /></a>
  42. </div>
  43. <p class="sm2 c999">点此下载→→<a href="http://www.yilingsj.com/css3/2014-10-14/纯css做的炫酷图片墙特效.zip" title="纯css做的炫酷图片墙特效" target="_blank" class="ls">纯css做的炫酷图片墙特效.zip</a><br>
  44. 参考国外文献：<a href="http://zurb.com/article/305/easily-turn-your-images-into-polaroids-wi" target="_blank" class="ls" >http://zurb.com/article/305/easily-turn-your-images-into-polaroids-wi</a></p>
  45. </body>
  46. </html>

点此下载→→纯css做的炫酷图片墙特效.zip
参考国外文献：http://zurb.com/article/305/easily-turn-your-images-into-polaroids-wi

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/css3/2014-10-14/213.html

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

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

Tag: 纯css图片墙 炫酷图片墙特效 :after :nth-child css3旋转 鼠标滑过动画

上一篇: 妙用伪对象实现3D立方体　　　下一篇: css3+js实现手机wap版炫酷旋转式放射特效

相关文章

微信小程序从入坑到放弃之坑三：buttios和android手机端的坑之背景音乐css3动画教程之画对勾特效淘宝侧边栏导航特效css3+js实现手机wap版炫酷旋转式放标题栏目处的背景图平铺技巧css清除浮动的几种方法详解妙用伪对象实现3D立方体c店导航特效(平面360度旋转)鼠标滑过图片显示遮罩层特效集合(1

评论区

我要评论

近期更新

权限破解之一键复制某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号
特别申明：本站内容仅供个人学习参考，不做其它用途。