本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
CSS3 实现六边形Div图片展示效果
一. 效果图
二. 原理讲解
这个效果用到的主要知识点 :
1. transform: rotate(120deg); 图片旋转
2. overflow: hidden; 超出隐藏
3. visibility: hidden; 也是隐藏,与 display:none; 相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置
我们要用到3层p进行旋转来得到这个效果(注: 3层 p 的大小是一样的)。最外层 p(boxF) 旋转120度,第二层 (boxS) 旋转-60度,第三层 (boxT) 再旋转-60度,此时刚好回正。我们的图片就放在第3层的 p 背景中。因为前两层 p 中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层 p 设置 visibility: hidden; 而第3层 p 是放图片的,需要显示出来,因此设置 visibility: visible; (注: 如果你不对第3层 p 设置 visibility: visible; 那它默认就会继承第二层 p(boxS) 的 visibility: hidden; )。经过旋转肯定有超出的部分,因此对3个p都设置 overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意,那就是p的宽高比例必须满足4:5,不然得到的就不是6边形了。在上面的效果图片中。我们在第三层 (boxT) 里面还放置了一个 p(overlay),这个 p 是用于遮罩的,当鼠标移到6边形上时,会有遮罩效果。在 p(overlay) 里面有个a标签,里面是个 + 号,点击 a 标签则弹出层,显示大图(注: 这个 js 效果暂时没写)。
三. 上面效果图的DEMO代码【推荐:《css视频教程》】
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 实现六边形图片展示效果</title>
<style type="text/css">
body, p, 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>
<p class="box">
<!--第一行(lineFirst)-->
<p class="lineF">
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/1.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/2.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/3.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
</p>
<!--第二行(lineSecond)-->
<p class="lineS">
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/4.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/5.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
</p>
</p></body></html>
登录后复制
-- 想看效果,直接将DEMO代码复制就行了,当然,图片得你自己加了,IE9以下版本不支持。
以上就是css 怎么设置图片为六边形的详细内容,更多请关注靠谱客其它相关文章!
最后
以上就是自由微笑最近收集整理的关于css 怎么设置图片为六边形的全部内容,更多相关css内容请搜索靠谱客的其他文章。
发表评论 取消回复