您的位置：首页 > Web前端 > CSS

css实现五个六边形排列

2017-05-19 16:40 239 查看

<!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">

<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>

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航