SOURCE

console 命令行工具 X clear

                    
>
console
//svg标签嵌套在一个div中的原因是解决IE对svg做animation不兼容的问题。
//css样式也加了兼容前缀
<div class="hex-loading">
        <div class="hex-con">
            <div class="polygons-top">
                <div class="polygon1">
                    <svg width="70px" height="80px">
                        <polygon style="fill:${hexColor}" stroke="blue" class="polygon"
                                 points="35,0,70,20,70,60,35,80,0,60,0,20"></polygon>
                    </svg>
                </div>
                <div class="polygon2">
                    <svg width="70px" height="80px">
                        <polygon style="fill:${hexColor}" stroke="blue" class="polygon"
                                 points="35,0,70,20,70,60,35,80,0,60,0,20"></polygon>
                    </svg>
                </div>
                <div class="polygon3">
                    <svg width="70px" height="80px">
                        <polygon style="fill:${hexColor}" stroke="blue" class="polygon"
                                 points="35,0,70,20,70,60,35,80,0,60,0,20"></polygon>
                    </svg>
                </div>
            </div>
            <div class="polygons-bottom">
                <div class="polygon4">
                    <svg width="70px" height="80px">
                        <polygon style="fill:${hexColor}" stroke="blue" class="polygon polygon4"
                                 points="35,0,70,20,70,60,35,80,0,60,0,20"></polygon>
                    </svg>
                </div>
                <div class="polygon5">
                    <svg width="70px" height="80px">
                        <polygon style="fill:${hexColor}" stroke="blue" class="polygon polygon5"
                                 points="35,0,70,20,70,60,35,80,0,60,0,20"></polygon>
                    </svg>
                </div>
                <div class="polygon6">
                    <svg width="70px" height="80px">
                        <polygon style="fill:${hexColor}" stroke="blue" class="polygon polygon6"
                                 points="35,0,70,20,70,60,35,80,0,60,0,20"></polygon>
                    </svg>
                </div>
            </div>
        </div>
    </div>
.hex-con {
    width: 280px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.16);
}

.polygon {
    transform-origin: center center;
    fill: rgba(200, 231, 242, 1); /*修改多变形的背景颜色为深蓝绿色*/
    stroke-width: 0; /*去除多边形的边框*/
}

.polygons-top {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
}

.polygons-top div, .polygons-bottom div {
    margin-right: 5px;
}

.polygons-bottom {
    position: absolute;
    top: 65px;
    left: 37px;
    display: flex;
    align-items: center;
}

.polygon1 {
    opacity: 1;
    -webkit-animation: polygon-1-move 1.1s ease-in-out infinite;
    -moz-animation: polygon-1-move 1.1s ease-in-out infinite;
    -ms-animation: polygon-1-move 1.1s ease-in-out infinite;
    -o-animation: polygon-1-move 1.1s ease-in-out infinite;
    animation: polygon-1-move 1.1s ease-in-out infinite;
}

.polygon2 {
    opacity: 0.8;
    -webkit-animation: polygon-1-move 1.1s 0.1s ease-in-out infinite;
    -moz-animation: polygon-1-move 1.1s 0.1s ease-in-out infinite;
    -ms-animation: polygon-1-move 1.1s 0.1s ease-in-out infinite;
    -o-animation: polygon-1-move 1.1s 0.1s ease-in-out infinite;
    animation: polygon-1-move 1.1s 0.1s ease-in-out infinite;
}

.polygon3 {
    opacity: 0.6;
    -webkit-animation: polygon-1-move 1.1s 0.2s ease-in-out infinite;
    -moz-animation: polygon-1-move 1.1s 0.2s ease-in-out infinite;
    -ms-animation: polygon-1-move 1.1s 0.2s ease-in-out infinite;
    -o-animation: polygon-1-move 1.1s 0.2s ease-in-out infinite;
    animation: polygon-1-move 1.1s 0.2s ease-in-out infinite;
}

.polygon4 {
    opacity: 0.5;
    -webkit-animation: polygon-1-move 1.1s 0.3s ease-in-out infinite;
    -moz-animation: polygon-1-move 1.1s 0.3s ease-in-out infinite;
    -ms-animation: polygon-1-move 1.1s 0.3s ease-in-out infinite;
    -o-animation: polygon-1-move 1.1s 0.3s ease-in-out infinite;
    animation: polygon-1-move 1.1s 0.3s ease-in-out infinite;
}

.polygon5 {
    opacity: 0.4;
    -webkit-animation: polygon-1-move 1.1s 0.4s ease-in-out infinite;
    -moz-animation: polygon-1-move 1.1s 0.4s ease-in-out infinite;
    -ms-animation: polygon-1-move 1.1s 0.4s ease-in-out infinite;
    -o-animation: polygon-1-move 1.1s 0.4s ease-in-out infinite;
    animation: polygon-1-move 1.1s 0.4s ease-in-out infinite;
}

.polygon6 {
    opacity: 0.3;
    -webkit-animation: polygon-1-move 1.1s 0.5s ease-in-out infinite;
    -moz-animation: polygon-1-move 1.1s 0.5s ease-in-out infinite;
    -ms-animation: polygon-1-move 1.1s 0.5s ease-in-out infinite;
    -o-animation: polygon-1-move 1.1s 0.5s ease-in-out infinite;
    animation: polygon-1-move 1.1s 0.5s ease-in-out infinite;
}

@keyframes polygon-1-move {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@-ms-keyframes polygon-1-move {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@-moz-keyframes polygon-1-move {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@-webkit-keyframes polygon-1-move {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@-o-keyframes polygon-1-move {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

.hex-loading {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
}