python八角形_CSS3六角形、八角形、十二角形

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes rotateHexa {

17% {

transform: translate(75px, 0);

}

33% {

transform: translate(100px, 50px);

}

50% {

transform: translate(75px, 100px);

}

67% {

transform: translate(0, 100px);

}

83% {

transform: translate(-25px, 50px);

}

100% {

transform: translate(0, 0);

}

}

@-webkit-keyframes rotateOcta {

12.5% {

transform: translate(50px, 0);

}

25% {

transform: translate(75px, 25px);

}

37.5% {

transform: translate(75px, 75px);

}

50% {

transform: translate(50px, 100px);

}

62.5% {

transform: translate(0, 100px);

}

75% {

transform: translate(-25px, 75px);

}

87.5% {

transform: translate(-25px, 25px);

}

100% {

transform: translate(0, 0);

}

}

@-webkit-keyframes rotateDeca {

8.33% {

transform: translate(25px, 15px);

}

16.66% {

transform: translate(40px, 40px);

}

24.99% {

transform: translate(40px, 65px);

}

33.33% {

transform: translate(25px, 85px);

}

41.66% {

transform: translate(0, 100px);

}

49.99% {

transform: translate(-25px, 100px);

}

58.33% {

transform: translate(-50px, 85px);

}

66.66% {

transform: translate(-65px, 65px);

}

74.99% {

transform: translate(-65px, 40px);

}

83.33% {

transform: translate(-50px, 15px);

}

91.66% {

transform: translate(-25px, 0);

}

100% {

transform: translate(0, 0);

}

}

.octa {

width: 11px;

height: 11px;

position: absolute;

border-radius: 100%;

background-color: #FF73B8;

top: 30%;

left: 47.5%;

-webkit-animation: rotateOcta 5s linear infinite;

}

.hexa {

width: 11px;

height: 11px;

position: absolute;

border-radius: 100%;

background-color: #D5FB52;

top: 30%;

left: 12.5%;

-webkit-animation: rotateHexa 5s linear infinite;

}

.deca {

width: 11px;

height: 11px;

position: absolute;

border-radius: 100%;

background-color: #FF9600;

top: 30%;

left: 85%;

-webkit-animation: rotateDeca 5s linear infinite;

}

.child {

position: absolute;

width: 10px;

height: 10px;

border-radius: 100%;

rgba(255, 255, 255, 0);

border-style: solid;

border-width: 1px;

border-color: #FF95C9;

top: 30%;

left: 47.5%;

z-index: -1;

}

.hexagon {

top: 30%;

left: 12.5%;

border-color: #F1FDB0;

}

.decagon {

top: 30%;

left: 85%;

border-color: #FFB273;

}

#hex_two {

margin-left: 75px;

}

#hex_three {

margin-left: 100px;

margin-top: 50px;

}

#hex_four {

margin-left: 75px;

margin-top: 100px;

}

#hex_five {

margin-top: 100px;

}

#hex_six {

margin-top: 50px;

margin-left: -25px;

}

#oct_two {

margin-left: 50px;

}

#oct_three {

margin-left: 75px;

margin-top: 25px;

}

#oct_four {

margin-left: 75px;

margin-top: 75px;

}

#oct_five {

margin-left: 50px;

margin-top: 100px;

}

#oct_six {

margin-top: 100px;

margin-left: 0px;

}

#oct_seven {

margin-top: 75px;

margin-left: -25px;

}

#oct_eight {

margin-top: 25px;

margin-left: -25px;

}

#dec_two {

margin-left: 25px;

margin-top: 15px;

}

#dec_three {

margin-left: 40px;

margin-top: 40px;

}

#dec_four {

margin-left: 40px;

margin-top: 65px;

}

#dec_five {

margin-left: 25px;

margin-top: 85px;

}

#dec_six {

margin-top: 100px;

}

#dec_seven {

margin-left: -25px;

margin-top: 100px;

}

#dec_eight {

margin-left: -50px;

margin-top: 85px;

}

#dec_nine {

margin-left: -65px;

margin-top: 65px;

}

#dec_ten {

margin-left: -65px;

margin-top: 40px;

}

#dec_eleven {

margin-left: -50px;

margin-top: 15px;

}

#dec_twelve {

margin-left: -25px;

}

html {

background: #453A36;

}