css 统计,CSS统计UI

港控/mmm° 2022-09-03 01:27 111阅读 0赞

css

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);

body \{

background: \#ededeb;

body .title \{

width: 600px;

margin: 0 auto;

text-align: center;

body .title h1 \{

margin: 30px 0px 0px 0px;

font-family: 'Source Sans Pro', sans-serif;

font-weight: 400;

color: \#3d3d3d;

body .title h2 \{

margin: 10px 0px 0px 0px;

font-size: 18px;

color: \#8B8B8B;

font-weight: 400;

font-family: 'Source Sans Pro', sans-serif;

body .ui \{

width: 900px;

margin: 0 auto;

margin-top: 50px;

font-family: 'Source Sans Pro', sans-serif;

color: white;

box-shadow: none;

body .ui ul \{

margin: 0px 30px 10px 0px;

padding: 0;

list-style-type: none;

font-size: 11px;

font-weight: 400;

line-height: 20px;

body .ui .drop \{

z-index: -3;

opacity: 0;

width: 240px;

height: 10px;

background: \#3e8368;

position: absolute;

color: white;

bottom: 0;

padding: 12px 30px 21px 30px;

\-webkit-transition-property: bottom,opacity;

transition-property: bottom,opacity;

\-webkit-transition-duration: .3s;

transition-duration: .3s;

body .ui .drop p \{

color: \#f8fbfa;

body .ui\_box \{

width: 300px;

height: 220px;

position: relative;

background: \#3d3d3d;

float: left;

box-shadow: -1px 0px rgba(255, 255, 255, 0.07);

cursor: pointer;

\-webkit-transform: scale(1);

transform: scale(1);

\-webkit-transition-property: background,-webkit-transform;

transition-property: background,-webkit-transform;

transition-property: transform,background;

transition-property: transform,background,-webkit-transform;

\-webkit-transition-duration: .3s;

transition-duration: .3s;

body .ui\_box\_\_inner \{

padding: 30px;

body .ui\_box\_\_inner span \{

font-size: 36px;

font-weight: 700;

body .ui\_box\_\_inner .progress \{

width: 100%;

margin-top: 10px;

height: 6px;

background: rgba(0, 0, 0, 0.3);

margin-bottom: 15px;

body .ui\_box\_\_inner .progress\_graph \{

float: right;

border-bottom: 1px solid rgba(255, 255, 255, 0.09);

width: 85px;

text-align: center;

position: relative;

padding-left: 20px;

top: 24px;

body .ui\_box\_\_inner .progress\_graph\_\_bar--1 \{

width: 10px;

height: 20px;

background: \#4FA584;

float: left;

margin-right: 10px;

position: relative;

bottom: -10px;

\-webkit-animation: graph 1s;

body .ui\_box\_\_inner .progress\_graph\_\_bar--2 \{

width: 10px;

\-webkit-animation: graph2 1s;

height: 30px;

float: left;

margin-right: 10px;

background: \#4FA584;

body .ui\_box\_\_inner .progress\_graph\_\_bar--3 \{

width: 10px;

height: 24px;

margin-right: 10px;

\-webkit-animation: graph3 1s;

background: \#4FA584;

float: left;

position: relative;

bottom: -6px;

body .ui\_box\_\_inner .progress\_graph\_\_bar--4 \{

width: 10px;

height: 14px;

\-webkit-animation: graph4 1s;

bottom: -16px;

position: relative;

background: \#4FA584;

float: left;

body .ui\_box\_\_inner .progress\_bar \{

height: 6px;

float: left;

width: 58%;

background: \#4FA584;

\-webkit-animation: bar 2s;

body .ui\_box\_\_inner .progress\_bar--two \{

height: 6px;

float: left;

width: 78%;

background: \#4FA584;

\-webkit-animation: bar2 2s;

body .ui\_box h2 \{

font-weight: normal;

font-size: 16px;

margin: -4px 0px 3px 0px;

body .ui\_box p \{

font-size: 11px;

color: \#b6b6b6;

clear: left;

font-weight: 300;

width: 160px;

margin: 2px 0px 15px 0px;

body .ui\_box:hover \{

background: \#4FA584;

\-webkit-transform: scale(1.1);

transform: scale(1.1);

\-webkit-transition-property: background,-webkit-transform;

transition-property: background,-webkit-transform;

transition-property: transform,background;

transition-property: transform,background,-webkit-transform;

\-webkit-transition-duration: .3s;

transition-duration: .3s;

position: relative;

z-index: 1;

.ui\_box:hover > .ui\_box\_\_inner p \{

color: \#b3dacb;

.ui\_box:hover > .drop \{

\-webkit-transition-property: bottom,opacity;

transition-property: bottom,opacity;

\-webkit-transition-duration: .3s;

transition-duration: .3s;

bottom: -42px;

opacity: 1;

.ui\_box:hover > .drop .arrow \{

\-webkit-transition-property: -webkit-transform;

transition-property: -webkit-transform;

transition-property: transform;

transition-property: transform, -webkit-transform;

\-webkit-transition-duration: 1s;

transition-duration: 1s;

\-webkit-transform: rotate(765deg);

transform: rotate(765deg);

.ui\_box:hover > .ui\_box\_\_inner .progress\_graph > div \{

background: white;

.ui\_box:hover > .ui\_box\_\_inner .progress .progress\_bar, .ui\_box:hover > .ui\_box\_\_inner .progress .progress\_bar--two \{

background: white;

.stat\_left \{

float: left;

.arrow \{

width: 4px;

height: 4px;

\-webkit-transition-property: -webkit-transform;

transition-property: -webkit-transform;

transition-property: transform;

transition-property: transform, -webkit-transform;

\-webkit-transition-duration: 1s;

transition-duration: 1s;

\-webkit-transform: rotate(45deg);

transform: rotate(45deg);

\-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

border-top: 1px solid \#CDEAD3;

border-right: 1px solid \#CDEAD3;

float: right;

position: relative;

top: -24px;

right: 0px;

@-webkit-keyframes bar \{

from \{

width: 0px;

to \{

width: 58%;

@keyframes bar \{

from \{

width: 0px;

to \{

width: 58%;

@-webkit-keyframes bar2 \{

from \{

width: 0px;

to \{

width: 78%;

@keyframes bar2 \{

from \{

width: 0px;

to \{

width: 78%;

@-webkit-keyframes graph \{

from \{

height: 0px;

to \{

height: 20px;

@keyframes graph \{

from \{

height: 0px;

to \{

height: 20px;

@-webkit-keyframes graph2 \{

from \{

height: 0px;

to \{

height: 30px;

@keyframes graph2 \{

from \{

height: 0px;

to \{

height: 30px;

@-webkit-keyframes graph3 \{

from \{

height: 0px;

to \{

height: 24px;

@keyframes graph3 \{

from \{

height: 0px;

to \{

height: 24px;

@-webkit-keyframes graph4 \{

from \{

height: 0px;

to \{

height: 13px;

@keyframes graph4 \{

from \{

height: 0px;

to \{

height: 13px;

css 统计,CSS统计UI

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI CSS 框架 API

相关 Metro UI CSS 学习笔记之一：简介和Metro UI CSS 环境搭建

相关统计 java_Java 统计

相关 MySQL按日期分组统计（按天统计，按月统计）

相关 css 统计,CSS统计UI

相关数值统计

相关数字统计之统计页码

相关 Android中统计分析的SDK ,友盟统计，百度统计，腾讯统计

相关 MySQL按日期分组统计（按天统计，按月统计）

相关 Redis HyperLogLog 统计UV / 去重统计 /基数统计