html5圆形中心水,HTML5 圆球玻璃瓶里的水体刻度

CSS

语言：

CSSSCSS

确定

body {

font-family: sans-serif;

}

@keyframes spin {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

.fu-progress {

position: relative;

width: 250px;

height: 250px;

border: 5px solid #178bca;

border-radius: 50% !important;

}

.fu-progress .fu-inner {

position: absolute;

overflow: hidden;

z-index: 2;

width: 240px;

height: 240px;

border: 5px solid #fff;

border-radius: 50% !important;

}

.fu-progress .fu-inner .water {

position: absolute;

z-index: 1;

background: rgba(23, 139, 202, 0.5);

width: 200%;

height: 200%;

transform: translateZ(0);

-webkit-transform: translateZ(0);

transition: all 1s ease !important;

-webkit-transition: all 1s ease !important;

top: 50%;

left: -50%;

border: 1px solid transparent;

border-radius: 40% !important;

animation-duration: 10s;

animation-name: spin;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

.fu-progress .fu-inner .fu-percent {

position: absolute;

top: 57px;

width: 100%;

height: 100%;

font-size: 6em;

font-weight: bold;

color: #045681;

text-align: center;

}