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;
}
更新时间:2020-09-09 00:42:59
使用echarts图表进行统计及利用svg技术实现圆形旋转特效,使用于web页面和图表展示等应用场景