python条形图的动画显示水能时钟_水波动画背景的时钟界面

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

html {

background: #00BCD4;

overflow: hidden;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.box {

width: 350px;

height: 600px;

border-radius: 5px;

box-shadow: 9px 10px 47px 2px rgba(0, 0, 0, 1.0);

background: #1A237E;

position: relative;

overflow: hidden;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.wave {

opacity: 1;

position: absolute;

left: 50%;

background: #0277BD;

width: 500px;

height: 600px;

margin-left: -250px;

border-radius: 43%;

}

#waveone {

-webkit-animation: drift 3000ms infinite linear;

animation: drift 3000ms infinite linear;

}

#wavethree {

-webkit-animation: drift 2500ms infinite linear;

animation: drift 2500ms infinite linear;

background: #2196F3;

opacity: .5;

}

#wavetwo {

-webkit-animation: drift 5000ms infinite linear;

animation: drift 5000ms infinite linear;

opacity: .9;

background: #4FC3F7;

}

.box:after {

content: '';

display: block;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: -webkit-linear-gradient(top, #42A5F5, #BBDEFB 80%, rgba(92, 107, 192, 0.3));

background: linear-gradient(to bottom, #42A5F5, rgba(40, 53, 147, 0.2) 80%, #1A237E);

z-index: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.title {

position: absolute;

left: 0;

top: 0;

width: 100%;

z-index: 1;

line-height: 300px;

text-align: center;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

color: white;

text-transform: uppercase;

font-family: 'Josefin Sans', sans-serif;

letter-spacing: .4em;

font-size: 42px;

text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9);

text-indent: .3em;

}

@-webkit-keyframes drift {

from {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

from {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes drift {

from {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

from {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}