Html
    Css
    Js

    
                        
html {
	height:100%;
	min-height:100%;
	overflow:hidden;
}
html body {
	/*background:#222428 */;
	background-size:163px;
	font:14px/21px Monaco,sans-serif;
	color:#999;
	font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
	height:100%;
	min-height:100%;
}
html body a,html body a:visited {
	text-decoration:none;
	color:#FF805F;
}
html body h4 {
	margin:0;
	color:#666;
}
/*
        		.scene {
	width:100%;
	height:100%;
	-webkit-perspective:600;
	perspective:600;
	display:flex;
	align-items:center;
	justify-content:center;
}
*/
        		.scene {
	margin-left:60%;
}
.scene p {
	text-align:center;
	font-size:17px;
}
.scene svg {
	width:230px;
	height:230px;
}
.scene-margin {
	width:230px;
	height:230px;
	margin:40px;
	float:left;
}
.dc-logo {
	position:fixed;
	right:10px;
	bottom:10px;
}
.dc-logo:hover svg {
	-webkit-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite;
	animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite;
}
.dc-logo:hover:hover:before {
	content:'\2764';
	padding:6px;
	font:10px/1 Monaco,sans-serif;
	font-size:10px;
	color:#00fffe;
	text-transform:uppercase;
	position:absolute;
	left:-70px;
	top:-30px;
	white-space:nowrap;
	z-index:20px;
	box-shadow:0px 0px 4px #222;
	background:rgba(0,0,0,0.4);
}
.dc-logo:hover:hover:after {
	content:'Digital Craft';
	padding:6px;
	font:10px/1 Monaco,sans-serif;
	font-size:10px;
	color:#6E6F71;
	text-transform:uppercase;
	position:absolute;
	right:0;
	top:-30px;
	white-space:nowrap;
	z-index:20px;
	box-shadow:0px 0px 4px #222;
	background:rgba(0,0,0,0.4);
	background-image:none;
}
@-webkit-keyframes arrow-spin {
	50% {
	-webkit-transform:rotateY(360deg);
	transform:rotateY(360deg);
}
}@keyframes arrow-spin {
	50% {
	-webkit-transform:rotateY(360deg);
	transform:rotateY(360deg);
}
}#container {
	bottom:0px;
	position:absolute;
	left:0px;
}

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

ets柱状图表及svg圆形旋转

更新时间:2020-09-09 00:42:59

使用echarts图表进行统计及利用svg技术实现圆形旋转特效,使用于web页面和图表展示等应用场景

0