9个纯CSS实现的六边形旋转器动画图标

Pure CSS hexagonal spinners

css3, hexagon, icon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3111
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #63a1f4;
}
.loader1,
.loader2,
.loader3,
.loader4,
.loader5,
.loader6,
.loader7,
.loader8,
.loader9,
.loader10,
.loader11,
.loader12,
.loader13,
.loader14,
.loader15,
.loader16,
.loader17,
.loader18,
.loader19,
.loader20,
.loader21,
.loader22,
.loader23,
.loader24 {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    position: absolute;
}
.loader1 {
    left: 100px;
    top: 100px;
}
.loader2 {
    left: 300px;
    top: 100px;
}
.loader3 {
    left: 500px;
    top: 100px;
}
.loader4 {
    left: 700px;
    top: 100px;
}
.loader5 {
    left: 900px;
    top: 100px;
}
.loader6 {
    left: 1100px;
    top: 100px;
}
.loader7 {
    left: 100px;
    top: 300px;
}
.loader8 {
    left: 300px;
    top: 300px;
}
.loader9 {
    left: 500px;
    top: 300px;
}
.loader10 {
    left: 700px;
    top: 300px;
}
.loader11 {
    left: 900px;
    top: 300px;
}
.loader12 {
    left: 1100px;
    top: 300px;
}
.loader13 {
    left: 100px;
    top: 500px;
}
.loader14 {
    left: 300px;
    top: 500px;
}
.loader15 {
    left: 500px;
    top: 500px;
}
.loader16 {
    left: 700px;
    top: 500px;
}
.loader17 {
    left: 900px;
    top: 500px;
}
.loader18 {
    left: 1100px;
    top: 500px;
}
.loader19 {
    left: 100px;
    top: 700px;
}
.loader20 {
    left: 300px;
    top: 700px;
}
.loader21 {
    left: 500px;
    top: 700px;
}
.loader22 {
    left: 700px;
    top: 700px;
}
.loader23 {
    left: 900px;
    top: 700px;
}
.loader24 {
    left: 1100px;
    top: 700px;
}
.container-A {
    position: absolute;
    width: 75%;
    height: 75%;
    left: 12.5%;
    top: 12.5%;
}
.container-B {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.spinner1,
.spinner2,
.spinner3 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.spinner1 {
    animation: rotation0 4s infinite linear, resize1 4s infinite linear;
}
.spinner2 {
    animation: rotation0 4s infinite linear, resize2 4s infinite linear;
}
.spinner3 {
    animation: rotation0 6s infinite linear, resize3 6s infinite linear;
}
.hex0,
.hex120,
.hex240 {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 57.74%;
    left: 0;
    top: 21.13%;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}
.loader8 .hex0,
.loader8 .hex120,
.loader8 .hex240,
.loader11 .hex0,
.loader11 .hex120,
.loader11 .hex240,
.loader14 .hex0,
.loader14 .hex120,
.loader14 .hex240,
.loader17 .hex0,
.loader17 .hex120,
.loader17 .hex240 {
    border-right: none;
}
.loader9 .hex0,
.loader12 .hex0,
.loader15 .hex0,
.loader18 .hex0 {
    border: none;
}
.hex0 {
    animation: rotation0 4s infinite linear;
}
.hex120 {
    transform: rotate(120deg);
    animation: rotation120 4s infinite linear;
}
.hex240 {
    transform: rotate(240deg);
    animation: rotation240 4s infinite linear;
}
@keyframes rotation0 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotation120 {
    0% {
        transform: rotate(120deg);
    }
    100% {
        transform: rotate(480deg);
    }
}
@keyframes rotation240 {
    0% {
        transform: rotate(240deg);
    }
    100% {
        transform: rotate(600deg);
    }
}
@keyframes resize1 {
    0%, 50%, 100% {
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;
    }
    25%,
    75% {
        width: 120%;
        height: 120%;
        left: -10%;
        top: -10%;
    }
    12.5%,
    37.5%,
    62.5%,
    87.5% {
        width: 70%;
        height: 70%;
        left: 15%;
        top: 15%;
    }
}
@keyframes resize2 {
    0%, 33.33%, 66.66%, 100% {
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;
    }
    16.66%,
    49.99%,
    83.333% {
        width: 70%;
        height: 70%;
        left: 15%;
        top: 15%;
    }
}
@keyframes resize3 {
    0%, 16.66%, 33.33%, 50%, 66.66%, 83.33%, 100% {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    2.77%,
    19.44%,
    36.11%,
    52.77%,
    69.44%,
    86.11% {
        width: 93.5%;
        height: 93.5%;
        top: 3.25%;
        left: 3.25%;
    }
    5.55%,
    22.22%,
    38.88%,
    55.55%,
    72.22%,
    88.88% {
        width: 84.4%;
        height: 84.4%;
        top: 7.8%;
        left: 7.8%;
    }
    8.33%,
    25%,
    41.66%,
    58.33%,
    75%,
    91.66% {
        width: 73.2%;
        height: 73.2%;
        top: 13.4%;
        left: 13.4%;
    }
    11.11%,
    27.77%,
    44.44%,
    61.11%,
    77.77%,
    94.44% {
        width: 84.4%;
        height: 84.4%;
        top: 7.8%;
        left: 7.8%;
    }
    13.88%,
    30.55%,
    47.22%,
    63.88%,
    80.55%,
    97.22% {
        width: 93.5%;
        height: 93.5%;
        top: 3.25%;
        left: 3.25%;
    }
}

HTML

Pure CSS hexagonal spinners

css3, hexagon, icon

编辑器支持Emmet

快捷键

Pure CSS hexagonal spinners

css3, hexagon, icon

使用CSS3旋转变换和混合模式实现的动画图标

15个纯CSS实现的响应式土豪金星球类应用动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：