原文:CSS3 实现六边形Div图片展示效果

效果图:

实现原理:

这个效果的主要css样式有:

1.>transform: rotate(120deg); 图片旋转

2.>overflow:hidden;  超出隐藏

3.>visibility: hidden;  也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置

我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的)。

最外层div(boxF)旋转120度。第二层(boxS)旋转-60度,第三层(boxT)再旋转-60度,此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置visibility: hidden; 而第3层div是放图片的,需要显示出来,因此设置visibility: visible; (ps:如果你不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility: hidden; )。经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;

经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意,那就是div的宽高不要相等,不然得到的就不是6边形了。

在上面的效果图片中。我在第三层(boxT)里面还放置了一个div(overlay),这个div是用于遮罩的,当鼠标移到6边形上时,会有遮罩效果。在div(overlay)里面有个a标签,里面是个+号,点击a标签则弹出层,显示大图(ps:这个js效果暂时没写)

下面给出上面效果图的DEMO代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>CSS3 实现六边形图片展示效果</title>
  6. <style type="text/css">
  7. body, div, img, ul, li
  8. {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. body
  13. {
  14. font-size: 12px;
  15. background-color: #DDD;
  16. min-width: 1200px;
  17. }
  18. ul, ul li
  19. {
  20. list-style: none;
  21. }
  22. .clear
  23. {
  24. clear: both;
  25. }
  26. .box
  27. {
  28. position: relative;
  29. width: 630px;
  30. margin: 100px auto;
  31. }
  32. .lineF, .lineS
  33. {
  34. position: absolute;
  35. visibility: hidden;
  36. }
  37. .lineS
  38. {
  39. top: 182px;
  40. left: 105px;
  41. }
  42. .boxF, .boxS, .boxT, .overlay
  43. {
  44. width: 200px;
  45. height: 250px;
  46. overflow: hidden;
  47. }
  48. .boxF, .boxS
  49. {
  50. visibility: hidden;
  51. }
  52. .boxF
  53. {
  54. transform: rotate(120deg);
  55. float: left;
  56. margin-left: 10px;
  57. -ms-transform: rotate(120deg);
  58. -moz-transform: rotate(120deg);
  59. -webkit-transform: rotate(120deg);
  60. }
  61. .boxS
  62. {
  63. transform: rotate(-60deg);
  64. -ms-transform: rotate(-60deg);
  65. -moz-transform: rotate(-60deg);
  66. -webkit-transform: rotate(-60deg);
  67. }
  68. .boxT
  69. {
  70. transform: rotate(-60deg);
  71. background: no-repeat 50% center;
  72. background-size: 125% auto;
  73. -ms-transform: rotate(-60deg);
  74. -moz-transform: rotate(-60deg);
  75. -webkit-transform: rotate(-60deg);
  76. visibility: visible;
  77. }
  78. .overlay
  79. {
  80. transition: all 250ms ease-in-out 0s;
  81. display: none;
  82. position: relative;
  83. }
  84. .overlay:hover
  85. {
  86. background-color: rgba(0,0,0,0.6);
  87. }
  88. .boxT:hover .overlay
  89. {
  90. display: block;
  91. }
  92. .overlay a
  93. {
  94. display: inline-block;
  95. position: absolute;
  96. left: 50%;
  97. top: 50%;
  98. margin: -16px 0 0 -16px;
  99. border-radius: 3px;
  100. background-color: #d3b850;
  101. text-align: center;
  102. line-height: 32px;
  103. width: 32px;
  104. height: 32px;
  105. text-decoration: none;
  106. color: White;
  107. font-size: 18px;
  108. font-weight: bolder;
  109. }
  110. </style>
  111. </head>
  112. <body>
  113. <div class="box">
  114. <!--第一行(lineFirst)-->
  115. <div class="lineF">
  116. <div class="boxF">
  117. <div class="boxS">
  118. <div class="boxT" style="background-image: url(img/1.jpg);">
  119. <div class="overlay">
  120. <a href="#">+</a>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. <div class="boxF">
  126. <div class="boxS">
  127. <div class="boxT" style="background-image: url(img/2.jpg);">
  128. <div class="overlay">
  129. <a href="#">+</a>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. <div class="boxF">
  135. <div class="boxS">
  136. <div class="boxT" style="background-image: url(img/3.jpg);">
  137. <div class="overlay">
  138. <a href="#">+</a>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143.  
  144. </div>
  145. <!--第二行(lineSecond)-->
  146. <div class="lineS">
  147. <div class="boxF">
  148. <div class="boxS">
  149. <div class="boxT" style="background-image: url(img/4.jpg);">
  150. <div class="overlay">
  151. <a href="#">+</a>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. <div class="boxF">
  157. <div class="boxS">
  158. <div class="boxT" style="background-image: url(img/5.jpg);">
  159. <div class="overlay">
  160. <a href="#">+</a>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. </body>
  168. </html>

想看效果,直接将DEMO代码复制就行了。IE9以下版本不支持。

CSS3 实现六边形Div图片展示效果的更多相关文章

  1. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  2. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  3. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  4. jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  5. html/css 图片展示效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. lightbox图片展示效果

    1.lightbox 头部导入: <script type="text/javascript" src="../Public/Js/prototype.js&quo ...

  7. css3制作六边形图片

    效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>v ...

  8. css实现六边形图片(最简单易懂方法实现高逼格图片展示)

    不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

  9. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

随机推荐

  1. 分析Cocos2d-x横版ACT手游源 1、登录

    我自己的游戏代码 因为 游戏源 盯着外面的 我们能够能够理解 /******************************************************************** ...

  2. (DDD)仓储的思考

    (DDD)仓储的思考 为什么需要仓储呢?领域对象(一般是聚合根)的被创建出来后的到最后持久化到数据库都需要跟数据库打交道,这样我们就需要一个类似数据库访问层的东西来管理领域对象.那是不是我们就可以设计 ...

  3. 【 D3.js 入门系列 --- 10.2 】 你可以拖动地图

    我的个人博客是:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 本节是结合9.2节 和10节 的内容制作的一个可力学导向的中国地图,用 ...

  4. Oracle数据表被drop后的恢复

    对于被drop的表和索引,都会存放在回收站中(所以对于生产的数据库必须设置好回收站功能) 由于本次生成环境在drop掉已有的表后,又一次创建了很多的表,全部直接还原的话会提示原有对象存在,表名反复.当 ...

  5. 创建线程的两种方式:继承Thread类和实现Runnable接口

    第一种方式:继承Thread类 步骤:1.定义类继承Thread 2.覆写Threa类的run方法. 自定义代码放在run方法中,让线程运行 3.调用线程的star方法, 该线程有两个作用:启动线程, ...

  6. .NET开发者必备的11款免费工具

    原文:.NET开发者必备的11款免费工具 如今,HTML5,jQuery,JavaScript等等这些热门技术,受到了开发者们的强烈追捧,有了这些开发工具也为开发者们减轻了许多负担.本文为开发者介绍了 ...

  7. hdu 4919 Exclusive or

    Exclusive or Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) T ...

  8. windows平台搭建lighttpd+php+sqlite

    (一)php 1. 下载及安装 http://www.appservnetwork.com/ 从上面的网址下载appserv-win32-2.5.10并安装,在安装的时候,仅仅选择安装php. 由于, ...

  9. UVA11080- Place the Guards(二分图染色)

    题目链接 题意:放最少的士兵去监视全部的道路, 但士兵不可相邻,符合的话,就输出最少的士兵数,否则输出-1 思路:事实上就是二分图染色,即黑白染色,然后选择黑白染色最少的那个颜色累加,但要注意可能有多 ...

  10. js中frame的操作问题

    这里以图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取. A  首先从 父(frameABC)------->子(frameA,frameB,frameC) ...