Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background:#000;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
.cf:after {
	content:'';
	clear:both;
	display:table;
}
#home {
	width:1990px;
	margin:0 auto;
}
#home .svgWrap {
	position:relative;
	margin-bottom:1px;
	cursor:pointer;
}
#home .svgWrap:nth-child(2n) {
	margin-top:-90px;
	margin-left:-48px;
}
#home .svgWrap:nth-child(1n) {
	margin-left:-47px;
}
#home .svgWrap:nth-child(14n) {
	display:none;
}
.data {
	position:absolute;
	left:80px;
	top:64px;
	color:#fff;
	font-size:20px;
}
.scaleInfo {
	position:absolute;
	left:0;
	top:0;
	z-index:999;
	width:254px;
	height:229px;
	background:#000 url("img/icon-bg.png") no-repeat;
	color:#fff;
	font-size:26px;
	text-align:center;
	padding-top:60px;
	box-sizing:border-box;
	display:none;
}
.scaleInfo h3 {
	margin-bottom:20px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

边框带渐变色的蜂窝特效

本地只是测试的假数据,大家可以替换自己想要的数据,这个用svg实现起来要比canvas好实现而且扩展性很强

0