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代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>CSS3 实现六边形图片展示效果</title>
- <style type="text/css">
- body, div, img, ul, li
- {
- margin: 0;
- padding: 0;
- }
- body
- {
- font-size: 12px;
- background-color: #DDD;
- min-width: 1200px;
- }
- ul, ul li
- {
- list-style: none;
- }
- .clear
- {
- clear: both;
- }
- .box
- {
- position: relative;
- width: 630px;
- margin: 100px auto;
- }
- .lineF, .lineS
- {
- position: absolute;
- visibility: hidden;
- }
- .lineS
- {
- top: 182px;
- left: 105px;
- }
- .boxF, .boxS, .boxT, .overlay
- {
- width: 200px;
- height: 250px;
- overflow: hidden;
- }
- .boxF, .boxS
- {
- visibility: hidden;
- }
- .boxF
- {
- transform: rotate(120deg);
- float: left;
- margin-left: 10px;
- -ms-transform: rotate(120deg);
- -moz-transform: rotate(120deg);
- -webkit-transform: rotate(120deg);
- }
- .boxS
- {
- transform: rotate(-60deg);
- -ms-transform: rotate(-60deg);
- -moz-transform: rotate(-60deg);
- -webkit-transform: rotate(-60deg);
- }
- .boxT
- {
- transform: rotate(-60deg);
- background: no-repeat 50% center;
- background-size: 125% auto;
- -ms-transform: rotate(-60deg);
- -moz-transform: rotate(-60deg);
- -webkit-transform: rotate(-60deg);
- visibility: visible;
- }
- .overlay
- {
- transition: all 250ms ease-in-out 0s;
- display: none;
- position: relative;
- }
- .overlay:hover
- {
- background-color: rgba(0,0,0,0.6);
- }
- .boxT:hover .overlay
- {
- display: block;
- }
- .overlay a
- {
- display: inline-block;
- position: absolute;
- left: 50%;
- top: 50%;
- margin: -16px 0 0 -16px;
- border-radius: 3px;
- background-color: #d3b850;
- text-align: center;
- line-height: 32px;
- width: 32px;
- height: 32px;
- text-decoration: none;
- color: White;
- font-size: 18px;
- font-weight: bolder;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <!--第一行(lineFirst)-->
- <div class="lineF">
- <div class="boxF">
- <div class="boxS">
- <div class="boxT" style="background-image: url(img/1.jpg);">
- <div class="overlay">
- <a href="#">+</a>
- </div>
- </div>
- </div>
- </div>
- <div class="boxF">
- <div class="boxS">
- <div class="boxT" style="background-image: url(img/2.jpg);">
- <div class="overlay">
- <a href="#">+</a>
- </div>
- </div>
- </div>
- </div>
- <div class="boxF">
- <div class="boxS">
- <div class="boxT" style="background-image: url(img/3.jpg);">
- <div class="overlay">
- <a href="#">+</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!--第二行(lineSecond)-->
- <div class="lineS">
- <div class="boxF">
- <div class="boxS">
- <div class="boxT" style="background-image: url(img/4.jpg);">
- <div class="overlay">
- <a href="#">+</a>
- </div>
- </div>
- </div>
- </div>
- <div class="boxF">
- <div class="boxS">
- <div class="boxT" style="background-image: url(img/5.jpg);">
- <div class="overlay">
- <a href="#">+</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
想看效果,直接将DEMO代码复制就行了。IE9以下版本不支持。
CSS3 实现六边形Div图片展示效果的更多相关文章
- JS实现有点炫的图片展示效果-图片解体和组合
经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 如何用Jquery做图片展示效果
一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
- jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
- html/css 图片展示效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- lightbox图片展示效果
1.lightbox 头部导入: <script type="text/javascript" src="../Public/Js/prototype.js&quo ...
- css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...
- css实现六边形图片(最简单易懂方法实现高逼格图片展示)
不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
随机推荐
- 分析Cocos2d-x横版ACT手游源 1、登录
我自己的游戏代码 因为 游戏源 盯着外面的 我们能够能够理解 /******************************************************************** ...
- (DDD)仓储的思考
(DDD)仓储的思考 为什么需要仓储呢?领域对象(一般是聚合根)的被创建出来后的到最后持久化到数据库都需要跟数据库打交道,这样我们就需要一个类似数据库访问层的东西来管理领域对象.那是不是我们就可以设计 ...
- 【 D3.js 入门系列 --- 10.2 】 你可以拖动地图
我的个人博客是:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 本节是结合9.2节 和10节 的内容制作的一个可力学导向的中国地图,用 ...
- Oracle数据表被drop后的恢复
对于被drop的表和索引,都会存放在回收站中(所以对于生产的数据库必须设置好回收站功能) 由于本次生成环境在drop掉已有的表后,又一次创建了很多的表,全部直接还原的话会提示原有对象存在,表名反复.当 ...
- 创建线程的两种方式:继承Thread类和实现Runnable接口
第一种方式:继承Thread类 步骤:1.定义类继承Thread 2.覆写Threa类的run方法. 自定义代码放在run方法中,让线程运行 3.调用线程的star方法, 该线程有两个作用:启动线程, ...
- .NET开发者必备的11款免费工具
原文:.NET开发者必备的11款免费工具 如今,HTML5,jQuery,JavaScript等等这些热门技术,受到了开发者们的强烈追捧,有了这些开发工具也为开发者们减轻了许多负担.本文为开发者介绍了 ...
- hdu 4919 Exclusive or
Exclusive or Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) T ...
- windows平台搭建lighttpd+php+sqlite
(一)php 1. 下载及安装 http://www.appservnetwork.com/ 从上面的网址下载appserv-win32-2.5.10并安装,在安装的时候,仅仅选择安装php. 由于, ...
- UVA11080- Place the Guards(二分图染色)
题目链接 题意:放最少的士兵去监视全部的道路, 但士兵不可相邻,符合的话,就输出最少的士兵数,否则输出-1 思路:事实上就是二分图染色,即黑白染色,然后选择黑白染色最少的那个颜色累加,但要注意可能有多 ...
- js中frame的操作问题
这里以图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取. A 首先从 父(frameABC)------->子(frameA,frameB,frameC) ...