艺灵设计

全部文章
×

纯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

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/css3/2014-10-14/213.html

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

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

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

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

评论区