CSS3 伸缩管螺旋动画

You Can\'t Go Back Again—

CSS3

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    font-size: 0;
}
* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
html {
    overflow: hidden;
    font-size: 62.5%;
}
body {
    font-size: 32px;
}
.wrap {
    background-color: blue;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
}
@-webkit-keyframes left_to_right {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50% {
        -webkit-transform: translate3d(250px, 0, 0);
        transform: translate3d(250px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes left_to_right {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    50% {
        -webkit-transform: translate3d(250px, 0, 0);
        transform: translate3d(250px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.outline {
    -webkit-animation: rotate 6s linear infinite reverse;
    animation: rotate 6s linear infinite reverse;
    position: absolute;
    height: 500px;
    width: 500px;
    border-radius: 100%;
}
.guide {
    position: absolute;
    top: calc(50% - 1px);
    width: 100%;
    height: 1px;
}
.guide .obj {
    -webkit-animation: left_to_right 1.5s infinite ease-in-out;
    animation: left_to_right 1.5s infinite ease-in-out;
    display: inline-block;
    width: 125px;
    height: 125px;
    position: absolute;
    top: -62.5px;
    left: 62.5px;
    border-radius: 100%;
    background-color: blue;
    box-shadow: 1px 1px 10px 2px white;
}
.guide:nth-of-type(1) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.guide:nth-of-type(2) {
    -webkit-transform: rotate(7.5deg);
    transform: rotate(7.5deg);
}
.guide:nth-of-type(3) {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.guide:nth-of-type(4) {
    -webkit-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}
.guide:nth-of-type(5) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.guide:nth-of-type(6) {
    -webkit-transform: rotate(37.5deg);
    transform: rotate(37.5deg);
}
.guide:nth-of-type(7) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.guide:nth-of-type(8) {
    -webkit-transform: rotate(52.5deg);
    transform: rotate(52.5deg);
}
.guide:nth-of-type(9) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.guide:nth-of-type(10) {
    -webkit-transform: rotate(67.5deg);
    transform: rotate(67.5deg);
}
.guide:nth-of-type(11) {
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
}
.guide:nth-of-type(12) {
    -webkit-transform: rotate(82.5deg);
    transform: rotate(82.5deg);
}
.guide:nth-of-type(13) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.guide:nth-of-type(14) {
    -webkit-transform: rotate(97.5deg);
    transform: rotate(97.5deg);
}
.guide:nth-of-type(15) {
    -webkit-transform: rotate(105deg);
    transform: rotate(105deg);
}
.guide:nth-of-type(16) {
    -webkit-transform: rotate(112.5deg);
    transform: rotate(112.5deg);
}
.guide:nth-of-type(17) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}
.guide:nth-of-type(18) {
    -webkit-transform: rotate(127.5deg);
    transform: rotate(127.5deg);
}
.guide:nth-of-type(19) {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.guide:nth-of-type(20) {
    -webkit-transform: rotate(142.5deg);
    transform: rotate(142.5deg);
}
.guide:nth-of-type(21) {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
}
.guide:nth-of-type(22) {
    -webkit-transform: rotate(157.5deg);
    transform: rotate(157.5deg);
}
.guide:nth-of-type(23) {
    -webkit-transform: rotate(165deg);
    transform: rotate(165deg);
}
.guide:nth-of-type(24) {
    -webkit-transform: rotate(172.5deg);
    transform: rotate(172.5deg);
}
.guide:nth-of-type(1) .obj {
    -webkit-animation-delay: 0.0625s;
    animation-delay: 0.0625s;
}
.guide:nth-of-type(2) .obj {
    -webkit-animation-delay: 0.125s;
    animation-delay: 0.125s;
}
.guide:nth-of-type(3) .obj {
    -webkit-animation-delay: 0.1875s;
    animation-delay: 0.1875s;
}
.guide:nth-of-type(4) .obj {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}
.guide:nth-of-type(5) .obj {
    -webkit-animation-delay: 0.3125s;
    animation-delay: 0.3125s;
}
.guide:nth-of-type(6) .obj {
    -webkit-animation-delay: 0.375s;
    animation-delay: 0.375s;
}
.guide:nth-of-type(7) .obj {
    -webkit-animation-delay: 0.4375s;
    animation-delay: 0.4375s;
}
.guide:nth-of-type(8) .obj {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.guide:nth-of-type(9) .obj {
    -webkit-animation-delay: 0.5625s;
    animation-delay: 0.5625s;
}
.guide:nth-of-type(10) .obj {
    -webkit-animation-delay: 0.625s;
    animation-delay: 0.625s;
}
.guide:nth-of-type(11) .obj {
    -webkit-animation-delay: 0.6875s;
    animation-delay: 0.6875s;
}
.guide:nth-of-type(12) .obj {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}
.guide:nth-of-type(13) .obj {
    -webkit-animation-delay: 0.8125s;
    animation-delay: 0.8125s;
}
.guide:nth-of-type(14) .obj {
    -webkit-animation-delay: 0.875s;
    animation-delay: 0.875s;
}
.guide:nth-of-type(15) .obj {
    -webkit-animation-delay: 0.9375s;
    animation-delay: 0.9375s;
}
.guide:nth-of-type(16) .obj {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.guide:nth-of-type(17) .obj {
    -webkit-animation-delay: 1.0625s;
    animation-delay: 1.0625s;
}
.guide:nth-of-type(18) .obj {
    -webkit-animation-delay: 1.125s;
    animation-delay: 1.125s;
}
.guide:nth-of-type(19) .obj {
    -webkit-animation-delay: 1.1875s;
    animation-delay: 1.1875s;
}
.guide:nth-of-type(20) .obj {
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}
.guide:nth-of-type(21) .obj {
    -webkit-animation-delay: 1.3125s;
    animation-delay: 1.3125s;
}
.guide:nth-of-type(22) .obj {
    -webkit-animation-delay: 1.375s;
    animation-delay: 1.375s;
}
.guide:nth-of-type(23) .obj {
    -webkit-animation-delay: 1.4375s;
    animation-delay: 1.4375s;
}
.guide:nth-of-type(24) .obj {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

HTML

You Can\'t Go Back Again—

CSS3

编辑器支持Emmet

快捷键

You Can\'t Go Back Again—

CSS3

CSS3 螺旋上升动画

CSS3 同心圆陀螺仪式旋转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：