反比定律动画演示"/>
css怎么写数字平方,CSS3 平方反比定律动画演示
CSS
语言：
CSSSCSS
确定
body {
padding: 0px;
margin: 0px;
background-color: black;
text-align: center;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
}
#outer {
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
animation: twirl 10s linear infinite;
border-radius: 50%;
border: solid 1px purple;
}
#outer div {
height: 100px;
width: 100px;
position: absolute;
border-radius: 50%;
}
#outer div:before {
content: "";
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: radial-gradient(circle at 50% 10%, #eeeeee, rgba(200, 200, 200, 0) 58%);
filter: blur(5px);
z-index: 2;
animation: counter 10s linear infinite;
}
#outer div:first-child {
background-color: blue;
left: 0px;
top: 0px;
box-shadow: inset 0 0 20px black, 0 0 20px blue;
}
#outer div:nth-child(2) {
background-color: green;
left: 0px;
bottom: 0px;
box-shadow: inset 0 0 20px black, 0 0 20px green;
}
#outer div:nth-child(3) {
background-color: yellow;
right: 0px;
top: 0px;
box-shadow: inset 0 0 20px black, 0 0 20px yellow;
}
#outer div:last-child {
background-color: red;
right: 0px;
bottom: 0px;
box-shadow: inset 0 0 20px black, 0 0 20px red;
}
@keyframes twirl {
0% {
transform: rotate(0deg);
width: 400px;
height: 400px;
}
10% {
transform: rotate(180deg);
width: 400px;
height: 400px;
}
20% {
transform: rotate(360deg);
width: 400px;
height: 400px;
}
30% {
transform: rotate(720deg);
width: 300px;
height: 300px;
}
32% {
transform: rotate(1080deg);
width: 300px;
height: 300px;
}
34% {
transform: rotate(1440deg);
width: 200px;
height: 200px;
}
36% {
transform: rotate(1800deg);
width: 200px;
height: 200px;
}
38% {
transform: rotate(2160deg);
width: 200px;
height: 200px;
}
40% {
transform: rotate(2520deg);
width: 200px;
height: 200px;
}
42% {
transform: rotate(2880deg);
width: 200px;
height: 200px;
}
44% {
transform: rotate(3240deg);
width: 300px;
height: 300px;
}
48% {
transform: rotate(3600deg);
width: 300px;
height: 300px;
}
50% {
transform: rotate(3960deg);
width: 300px;
height: 300px;
}
60% {
transform: rotate(4320deg);
width: 350px;
height: 350px;
}
70% {
transform: rotate(4680deg);
width: 350px;
height: 350px;
}
80% {
transform: rotate(5040deg);
width: 400px;
height: 400px;
}
90% {
transform: rotate(5400deg);
width: 400px;
height: 400px;
}
100% {
transform: rotate(5760deg);
width: 400px;
height: 400px;
}
}
@keyframes counter {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(-180deg);
}
20% {
transform: rotate(-360deg);
}
30% {
transform: rotate(-720deg);
}
32% {
transform: rotate(-1080deg);
}
34% {
transform: rotate(-1440deg);
}
36% {
transform: rotate(-1800deg);
}
38% {
transform: rotate(-2160deg);
}
40% {
transform: rotate(-2520deg);
}
42% {
transform: rotate(-2880deg);
}
44% {
transform: rotate(-3240deg);
}
48% {
transform: rotate(-3600deg);
}
50% {
transform: rotate(-3960deg);
}
60% {
transform: rotate(-4320deg);
}
70% {
transform: rotate(-4680deg);
}
80% {
transform: rotate(-5040deg);
}
90% {
transform: rotate(-5400deg);
}
100% {
transform: rotate(-5760deg);
}
}
更多推荐
css怎么写数字平方,CSS3 平方反比定律动画演示
发布评论