特别多圆圈连接的html,CSS3 节点连接的圆圈

CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

}

body {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.day-05 {

background: #01161e;

height: 100%;

width: 100%;

display: flex;

align-items: center;

}

.day-05 .container {

width: 500px;

height: 500px;

margin: auto;

position: relative;

}

.day-05 .container .geom {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

}

.day-05 .container .geom:nth-child(1) {

transform: rotate(25deg);

animation: rotateScale2 6s 1s ease-in-out infinite alternate, appear 6s 1s ease-in-out forwards;

}

@keyframes rotateScale1 {

0% {

transform: rotate(20deg);

}

50% {

transform: rotate(-160deg) scale(0.1);

}

100% {

transform: rotate(-340deg) scale(1);

}

}

.day-05 .container .geom:nth-child(2) {

transform: rotate(50deg);

animation: rotateScale2 3s 0.6s ease-in-out infinite alternate, appear 3s 0.6s ease-in-out forwards;

}

@keyframes rotateScale2 {

0% {

transform: rotate(40deg);

}

50% {

transform: rotate(220deg) scale(0.1);

}

100% {

transform: rotate(400deg) scale(1);

}

}

.day-05 .container .geom:nth-child(3) {

transform: rotate(75deg);

animation: rotateScale2 6s 3s ease-in-out infinite alternate, appear 6s 3s ease-in-out forwards;

}

@keyframes rotateScale3 {

0% {

transform: rotate(60deg);

}

50% {

transform: rotate(-120deg) scale(0.1);

}

100% {

transform: rotate(-300deg) scale(1);

}

}

.day-05 .container .geom:nth-child(4) {

transform: rotate(100deg);

animation: rotateScale4 3s 1.2s ease-in-out infinite alternate, appear 3s 1.2s ease-in-out forwards;

}

@keyframes rotateScale4 {

0% {

transform: rotate(80deg);

}

50% {

transform: rotate(260deg) scale(0.1);

}

100% {

transform: rotate(440deg) scale(1);

}

}

.day-05 .container .geom:nth-child(5) {

transform: rotate(125deg);

animation: rotateScale2 6s 5s ease-in-out infinite alternate, appear 6s 5s ease-in-out forwards;

}

@keyframes rotateScale5 {

0% {

transform: rotate(100deg);

}

50% {

transform: rotate(-80deg) scale(0.1);

}

100% {

transform: rotate(-260deg) scale(1);

}

}

.day-05 .container .geom:nth-child(6) {

transform: rotate(150deg);

animation: rotateScale6 3s 1.8s ease-in-out infinite alternate, appear 3s 1.8s ease-in-out forwards;

}

@keyframes rotateScale6 {

0% {

transform: rotate(120deg);

}

50% {

transform: rotate(300deg) scale(0.1);

}

100% {

transform: rotate(480deg) scale(1);

}

}

.day-05 .container .geom:nth-child(7) {

transform: rotate(175deg);

animation: rotateScale2 6s 7s ease-in-out infinite alternate, appear 6s 7s ease-in-out forwards;

}

@keyframes rotateScale7 {

0% {

transform: rotate(140deg);

}

50% {

transform: rotate(-40deg) scale(0.1);

}

100% {

transform: rotate(-220deg) scale(1);

}

}

.day-05 .container .geom:nth-child(8) {

transform: rotate(200deg);

animation: rotateScale8 3s 2.4s ease-in-out infinite alternate, appear 3s 2.4s ease-in-out forwards;

}

@keyframes rotateScale8 {

0% {

transform: rotate(160deg);

}

50% {

transform: rotate(340deg) scale(0.1);

}

100% {

transform: rotate(520deg) scale(1);

}

}

.day-05 .container .geom:nth-child(odd) .vertice {

background: #0fe5b0;

}

.day-05 .container .geom:nth-child(odd) .vertice::before,

.day-05 .container .geom:nth-child(odd) .vertice::after {

background: #0fe5b0;

}

.day-05 .container .geom:nth-child(even) .vertice {

background: #fff;

}

.day-05 .container .geom:nth-child(even) .vertice::before,

.day-05 .container .geom:nth-child(even) .vertice::after {

background: #fff;

}

.day-05 .container .geom .vertice {

position: absolute;

}

.day-05 .container .geom .vertice::before,

.day-05 .container .geom .vertice::after {

content: "";

position: absolute;

}

.day-05 .container .geom .vertice-1,

.day-05 .container .geom .vertice-5 {

height: 2px;

left: 166px;

width: 166px;

}

.day-05 .container .geom .vertice-1::before,

.day-05 .container .geom .vertice-5::before {

left: -9px;

top: -9px;

width: 20px;

height: 20px;

border-radius: 100%;

}

.day-05 .container .geom .vertice-1::after,

.day-05 .container .geom .vertice-5::after {

right: -9px;

top: -9px;

width: 20px;

height: 20px;

border-radius: 100%;

}

.day-05 .container .geom .vertice-5 {

bottom: 0;

}

.day-05 .container .geom .vertice-6,

.day-05 .container .geom .vertice-7,

.day-05 .container .geom .vertice-8 {

width: 2px;

left: 0;

height: 234px;

}

.day-05 .container .geom .vertice-6 {

transform: rotate(-45deg);

top: 334px;

}

.day-05 .container .geom .vertice-8 {

transform: rotate(-135deg);

top: 166px;

}

.day-05 .container .geom .vertice-2 {

transform: rotate(135deg);

top: 166px;

}

.day-05 .container .geom .vertice-4 {

transform: rotate(45deg);

top: 334px;

}

.day-05 .container .geom .vertice-2,

.day-05 .container .geom .vertice-3,

.day-05 .container .geom .vertice-4 {

width: 2px;

right: 0;

height: 234px;

}

.day-05 .container .geom .vertice-3,

.day-05 .container .geom .vertice-7 {

height: 166px;

top: 166px;

}

.day-05 .container .geom .vertice-3::before,

.day-05 .container .geom .vertice-7::before {

left: -9px;

top: -9px;

width: 20px;

height: 20px;

border-radius: 100%;

}

.day-05 .container .geom .vertice-3::after,

.day-05 .container .geom .vertice-7::after {

left: -9px;

bottom: -9px;

width: 20px;

height: 20px;

border-radius: 100%;

}

.day-05 .container .geom .vertice-6,

.day-05 .container .geom .vertice-8,

.day-05 .container .geom .vertice-2,

.day-05 .container .geom .vertice-4 {

transform-origin: 0 0;

}

@keyframes appear {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

@keyframes heightSpan {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}