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);

}

}