css怎么做水位高度,CSS3 水位上升(注水)动画
CSS语言:CSSSCSS确定#tout,html,body {width: 100%;height: 100%;}#tout {position: relative;}#tout:first-child div {display: block;width: 100px;height: 100px;border: 3px solid #ddd;border-radius: 50%;position
CSS
语言:
CSSSCSS
确定
#tout,
html,
body {
width: 100%;
height: 100%;
}
#tout {
position: relative;
}
#tout:first-child div {
display: block;
width: 100px;
height: 100px;
border: 3px solid #ddd;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#tout:first-child > div > div {
width: 90px;
height: 90px;
border: 5px solid #fff;
border-radius: 50%;
margin: auto;
overflow: hidden;
}
#tout:first-child div div div {
width: 110px;
height: 110px;
margin: auto;
top: 360px;
background-color: #ddd;
border-radius: 0%;
border: none;
animation-name: anim, color;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes anim {
/* @keyframes color{
0% { background-color: green; }
25% { background-color: green; }
50% { background-color: red; }
75% { background-color: yellow; }
100% { background-color: blue; }
} */
100% {
top: 0;
}
}
更多推荐
所有评论(0)