由于项目需求,需要在页面中画出一套蜂巢排版格式的列表。在经过网上的一番查阅资料,发现大多六边形的画法都是通过div覆盖由旋转的菱形遮掩为六边形。这种六边形虽然可以满足一些基本的需求,但我暂时没有想到如何满足我想要的边框动态效果。最后寻觅下发现了一款适合的样式,在此基础上做出样式方面的改动,变为符合我需求的蜂巢列表。作为一个前端新手,内容如有错误请多指正,谢谢大家。
这里主要是通过 svg 的 <path> 标签去绘制边框路径,然后使用 <text> 插入单行文本,使用 <foreignObject>
1.通过svg的x y width height四个参数构建svg实际占据的面积和位置。比如
<svg x="0" y="0" height="100%" width="100%">
就是占据了外层 <li> 的全部面积,这样做的好处是可以后续通过控制 <li>
2.通过svg的viewBox属性来设置内部的具体尺寸比例。比如
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
<text class="time" x='104' y='60' style='dominant-baseline:middle;text-anchor:middle;'>
10h
</text>
<foreignObject x='4' y='80' width="200" height="85">
<p class="title">abc-activiti-server</p>
</foreignObject>
<text class="num" x='104' y='180' style='dominant-baseline:middle;text-anchor:middle;'>
1个实例
</text>
</svg>
</li>
这里的viewBox=“0 0 208 240”说白了其实就是从svg的最左上(0,0)坐标的位置到最右下(208,240)坐标的,内部横向划分207次纵向划分239次的一个网格状区域。这样当我们想要将svg的任意子组件设置位置时,只需要给与指定的x y 即可。同时 <path>
3.通过 <path> 的d属性来进行边框描绘。d属性的写法有多种,不必纠结于某种写法,能实现即可。比如本次实现我使用的是 d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z"
4.通过 <text> 写一些简短的问题,其中行内样式 dominant-baseline 设置文本垂直居中, text-anchor
5.通过 <foreignObject>
html代码部分
<ul>
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
<text class="time" x='104' y='60' style='dominant-baseline:middle;text-anchor:middle;'>
10h
</text>
<foreignObject x='4' y='80' width="200" height="85">
<p class="title">abc-activiti-server</p>
</foreignObject>
<text class="num" x='104' y='180' style='dominant-baseline:middle;text-anchor:middle;'>
1个实例
</text>
</svg>
</li>
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<li class="hex">
<svg class="red" x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<li class="hex">
<svg class="yellow" x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<li class="hex">
<svg x="0" y="0" viewBox="0 0 208 240" height="100%" width="100%">
<path class="path" d="M 104,1 205,60 205,180 104,237 3,180 3,60 Z" />
</svg>
</li>
<ul>
View Code
然后就是css部分,里面用到的不常见样式的具体用法做了简单的文字描述,不太明白的可以尝试百度一下,大多都有专门的图文描述,这里就不再做赘述了
ul,p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
border: 1px solid #333333;
overflow: hidden;
}
li.hex {
float: left;
font-size: 20px;
}
svg {
width: 100%;
color: #3bc292;
}
svg path {
fill: transparent; /* 内部透明填充色 */
stroke: #3bc292; /* 边框色 */
stroke-width: 6; /* 边框宽度 */
stroke-linecap: round; /* 描边端点表现形式 */
stroke-linejoin: round; /* 描边转角的表现方式 */
stroke-miterlimit: 4;
stroke-dasharray: 20; /* 创建虚线,20px实线,20px虚线重复 */
animation: dash 5s linear infinite; /* 动画名 每次速度 匀速 无限次 */
transition: 0.3s;
-moz-transition: 0.3s; /* Firefox 4 */
-webkit-transition: 0.3s; /* Safari 和 Chrome */
-o-transition: 0.3s; /* Opera */
}
svg text {
fill: #3bc292; /* 文本填充色 */
transition: 0.3s;
-moz-transition: 0.3s; /* Firefox 4 */
-webkit-transition: 0.3s; /* Safari 和 Chrome */
-o-transition: 0.3s; /* Opera */
}
svg text.time {
font-size: 0.8em;
}
svg p.title {
text-align: center;
font-size: 1.5em;
transition: 0.3s;
-moz-transition: 0.3s; /* Firefox 4 */
-webkit-transition: 0.3s; /* Safari 和 Chrome */
-o-transition: 0.3s; /* Opera */
}
svg text.num {
font-size: 0.8em;
}
svg:hover path {
stroke: #3bc292;
fill: #69c2a3;
}
svg:hover text, svg:hover p.title {
fill: #ffffff;
color: #ffffff;
}
svg.red path {
stroke: #f56f6f;
animation-play-state: paused;
}
svg.red:hover path {
fill: #f56f6f;
}
svg.yellow path {
stroke: #f5b140;
animation-play-state: paused;
}
svg.yellow:hover path {
fill: #f5b140;
}
@keyframes dash {
to {
stroke-dashoffset: 120; /* 虚线在原路径下的偏移量 */
}
}
/*** SPACING AND SIZING *****************************************************************/
@media (min-width: 1401px) {
.hex {
width: 12.5%;
margin: 0 0.5%;
}
.hex:nth-child(13n+1) {
margin-left: 2.5%;
}
.hex:nth-child(13n+8),.hex:nth-child(13n+9),.hex:nth-child(13n+10),.hex:nth-child(13n+11),.hex:nth-child(13n+12),.hex:nth-child(13n+13) {
margin-top: -3%;
margin-bottom: -3%;
}
.hex:nth-child(13n+8) {
margin-left: 9.25%;
}
}
@media (max-width: 1400px) and (min-width: 1201px){
.hex {
width: 15%;
margin: 0 0.5%;
}
.hex:nth-child(11n+1) {
margin-left: 2.5%;
}
.hex:nth-child(11n+7),.hex:nth-child(11n+8),.hex:nth-child(11n+9),.hex:nth-child(11n+10),.hex:nth-child(11n+11) {
margin-top: -3.6%;
margin-bottom: -3.6%;
}
.hex:nth-child(11n+7) {
margin-left: 10.5%;
}
}
@media (max-width: 1200px) and (min-width: 901px){
.hex {
width: 19%;
margin: 0 0.3%;
}
.hex:nth-child(9n+1) {
margin-left: 1%;
}
.hex:nth-child(9n+6),.hex:nth-child(9n+7),.hex:nth-child(9n+8),.hex:nth-child(9n+9) {
margin-top: -4.6%;
margin-bottom: -4.6%;
}
.hex:nth-child(9n+6) {
margin-left: 10.5%;
}
}
@media (max-width: 900px) and (min-width: 601px) {
.hex {
width: 24%;
margin: 0 0.3%;
}
.hex:nth-child(7n+1) {
margin-left: 0.8%;
}
.hex:nth-child(7n+5),.hex:nth-child(7n+6),.hex:nth-child(7n+7) {
margin-top: -6%;
margin-bottom: -6%;
}
.hex:nth-child(7n+5) {
margin-left: 13.1%;
}
}
@media (max-width: 600px) {
.hex {
width: 30%;
margin: 0 1%;
}
.hex:nth-child(5n+1) {
margin-left: 3%;
}
.hex:nth-child(5n+4),.hex:nth-child(5n+5) {
margin-top: -6.5%;
margin-bottom: -6.5%;
}
.hex:nth-child(5n+4) {
margin-left: 19%;
}
}
View Code