纯CSS3实现的圆圈和半圆旋转器动画

Pure CSS circular spinners

css3, spinner

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

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

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 {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    position: absolute;
    animation: rotation 6s infinite linear;
}
.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;
}
.circle {
    box-sizing: border-box;
    border-radius: 50%;
}
.border-1 {
    border: 2px solid #fff;
}
.border-2 {
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
}
.border-3 {
    border-top: 2px solid #fff;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
}
.loader18 .border-3,
.loader18 {
    border-bottom: 2px solid #fff;
}
.spinner-container-A {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
    animation: rotation 4s infinite linear;
}
.spinner-container-B {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation: rotation 4s infinite linear;
}
.spinner-container-C {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}
.spinner-1 {
    position: absolute;
    width: 50%;
    height: 50%;
    left: calc(7.32% - 1px);
    top: calc(7.32% - 1px);
}
.spinner-2 {
    position: absolute;
    width: 75%;
    height: 75%;
    left: calc(3.66% - 1px);
    top: calc(3.66% - 1px);
}
.spinner-3 {
    position: absolute;
    animation: resize 4s infinite linear;
}
.spinner-4 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: resize 4s infinite linear, rotation 4s infinite linear;
}
.spinner-5 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: resize2 4s infinite linear, rotation 4s infinite linear;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes resize {
    0%, 100% {
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        left: -2px;
        top: -2px;
    }
    50% {
        width: 50%;
        height: 50%;
        left: calc(7.32% - 1px);
        top: calc(7.32% - 1px);
    }
}
@keyframes resize2 {
    0%, 100% {
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        left: -2px;
        top: -2px;
    }
    50% {
        width: 50%;
        height: 50%;
        left: 25%;
        top: 25%;
    }
}

HTML

Pure CSS circular spinners

css3, spinner

编辑器支持Emmet

快捷键

Pure CSS circular spinners

css3, spinner

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：