这回再高新管委会驻场，需要到一个效果，没办法，只能手写 ，来吧！
先来个网上的示例，这个是个动画效果
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
}
</style>
</head>
<body>
<div class="day-05">
<div class="container">
<div class="geom">
<span class="vertice vertice-1"></span>
<span class="vertice vertice-2"></span>
<span class="vertice vertice-3"></span>
<span class="vertice vertice-4"></span>
<span class="vertice vertice-5"></span>
<span class="vertice vertice-6"></span>
<span class="vertice vertice-7"></span>
<span class="vertice vertice-8"></span>
</div>
<div class="geom">
<span class="vertice vertice-1"></span>
<span class="vertice vertice-2"></span>
<span class="vertice vertice-3"></span>
<span class="vertice vertice-4"></span>
<span class="vertice vertice-5"></span>
<span class="vertice vertice-6"></span>
<span class="vertice vertice-7"></span>
<span class="vertice vertice-8"></span>
</div>
<div class="geom">
<span class="vertice vertice-1"></span>
<span class="vertice vertice-2"></span>
<span class="vertice vertice-3"></span>
<span class="vertice vertice-4"></span>
<span class="vertice vertice-5"></span>
<span class="vertice vertice-6"></span>
<span class="vertice vertice-7"></span>
<span class="vertice vertice-8"></span>
</div>
<div class="geom">
<span class="vertice vertice-1"></span>
<span class="vertice vertice-2"></span>
<span class="vertice vertice-3"></span>
<span class="vertice vertice-4"></span>
<span class="vertice vertice-5"></span>
<span class="vertice vertice-6"></span>
<span class="vertice vertice-7"></span>
<span class="vertice vertice-8"></span>
</div>
<div class="geom">
<span class="vertice vertice-1"></span>
<span class="vertice vertice-2"></span>
<span class="vertice vertice-3"></span>
<span class="vertice vertice-4"></span>
<span class="vertice vertice-5"></span>
<span class="vertice vertice-6"></span>
<span class="vertice vertice-7"></span>
<span class="vertice vertice-8"></span>
</div>
<div class="geom">
<span class="vertice vertice-1"></span>
<span class="vertice vertice-2"></span>
<span class="vertice vertice-3"></span>
<span class="vertice vertice-4"></span>
<span class="vertice vertice-5"></span>
<span class="vertice vertice-6"></span>
<span class="vertice vertice-7"></span>
<span class="vertice vertice-8"></span>
</div>
<div class="geom">
<span class="vertice vertice-1"></span>
<span class="vertice vertice-2"></span>
<span class="vertice vertice-3"></span>
<span class="vertice vertice-4"></span>
<span class="vertice vertice-5"></span>
<span class="vertice vertice-6"></span>
<span class="vertice vertice-7"></span>
<span class="vertice vertice-8"></span>
</div>
<div class="geom">
<span class="vertice vertice-1"></span>
<span class="vertice vertice-2"></span>
<span class="vertice vertice-3"></span>
<span class="vertice vertice-4"></span>
<span class="vertice vertice-5"></span>
<span class="vertice vertice-6"></span>
<span class="vertice vertice-7"></span>
<span class="vertice vertice-8"></span>
</div>
</div>
</div>
</body>
</html>
还不快抢沙发