18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

建站分享之边框带渐变色蜂窝背景

2020-01-08 分享

效果展示

苏州网站建设

页面

<div id="home">
    <div class="cf container"></div>
    <div class="scaleInfo">
        <h3></h3>
        <p></p>
    </div>
</div>

CSS

* {
	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;
}

JS

var svg = ''
var color1 = ''
var color2 = ''
for (var i = 0; i < 70; i++) {
    if (i < 20) {
        color2 = "#70244e"
        color1 = "#70244e"
    } else if (i > 50) {
        color1 = "#16366e"
        color2 = "#16366e"
    } else {
        color1 = "#70244e"
        color2 = "#16366e"
    }
    svg += '<div class="fl svgWrap">\n' +
        '            <svg class="fl" version="1.1" viewBox="0 0 600 516.8" width="200" height="180" preserveAspectRatio="none">\n' +
        '                <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 " fill="none" stroke="url(#orange_red' + i + ')"' +
        '                         stroke-width="8"/>\n' +
        '<defs>\n' +
        '<linearGradient id="orange_red' + i + '" x1="0%" y1="0%" x2="100%" y2="0%">\n' +
        '<stop offset="0%" style="stop-color:' + color1 + ';\n' +
        'stop-opacity:1"/>\n' +
        '<stop offset="100%" style="stop-color:' + color2 + ';\n' +
        'stop-opacity:1"/>\n' +
        '</linearGradient>\n' +
        '</defs>' +
        '            </svg>\n' +
        '            <div class="data">\n' +
        '                <h3>数据</h3>\n' +
        '                <strong>1344</strong>\n' +
        '            </div>\n' +
        '        </div>'
}
$(".container").append(svg)
$("#home .svgWrap").click(function(e) {
    var x = $(this).offset().left - 20
    var y = $(this).offset().top - 20
    var tit = $(this).find('.data h3').html()
    var num = $(this).find('.data strong').html()
    $(".scaleInfo").show().css({
        left: x,
        top: y
    }).children('h3').html(tit)
    $(".scaleInfo").children('p').html(num)
})
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图