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;

}

}