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页面和图表展示等应用场景