html5科技球动画效果,HTML5 SVG使用球体水面波动显示进度动画

CSS

语言：

CSSSCSS

确定

*,

*:before,

*:after {

box-sizing: border-box;

outline: none;

}

body {

background: #020438;

font: 14px/1 'Open Sans', helvetica, sans-serif;

-webkit-font-smoothing: antialiased;

}

.box {

height: 280px;

width: 280px;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

background: #020438;

border-radius: 100%;

overflow: hidden;

}

.box .percent {

position: absolute;

left: 0;

top: 0;

z-index: 3;

width: 100%;

height: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

display: -webkit-flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

color: #fff;

font-size: 64px;

}

.box .water {

position: absolute;

left: 0;

top: 0;

z-index: 2;

width: 100%;

height: 100%;

-webkit-transform: translate(0, 100%);

transform: translate(0, 100%);

background: #4D6DE3;

}

.box .water_wave {

width: 200%;

position: absolute;

bottom: 100%;

}

.box .water_wave_back {

right: 0;

fill: #C7EEFF;

-webkit-animation: wave-back 1.4s infinite linear;

animation: wave-back 1.4s infinite linear;

}

.box .water_wave_front {

left: 0;

fill: #4D6DE3;

margin-bottom: -1px;

-webkit-animation: wave-front .7s infinite linear;

animation: wave-front .7s infinite linear;

}

@-webkit-keyframes wave-front {

100% {

-webkit-transform: translate(-50%, 0);

transform: translate(-50%, 0);

}

}

@keyframes wave-front {

100% {

-webkit-transform: translate(-50%, 0);

transform: translate(-50%, 0);

}

}

@-webkit-keyframes wave-back {

100% {

-webkit-transform: translate(50%, 0);

transform: translate(50%, 0);

}

}

@keyframes wave-back {

100% {

-webkit-transform: translate(50%, 0);

transform: translate(50%, 0);

}

}