CSS3实现的点阵动画

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    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;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #171723;
    -webkit-perspective: 600px;
    perspective: 600px;
}
.canvas {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 324px;
    height: 324px;
    -webkit-transform: rotateX(65deg) rotateZ(35deg);
    transform: rotateX(65deg) rotateZ(35deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
@-webkit-keyframes dot {
    0%, 90%, 100% {
        -webkit-transform: translateZ(-40px);
        transform: translateZ(-40px);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    40%,
    50% {
        -webkit-transform: translateZ(40px);
        transform: translateZ(40px);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    }
}
@keyframes dot {
    0%, 90%, 100% {
        -webkit-transform: translateZ(-40px);
        transform: translateZ(-40px);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    40%,
    50% {
        -webkit-transform: translateZ(40px);
        transform: translateZ(40px);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    }
}
.dot {
    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;
    width: 36px;
    height: 36px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-40px);
    transform: translateZ(-40px);
    -webkit-animation: dot 5s infinite;
    animation: dot 5s infinite;
}
.dot::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-transform: rotateX(-65deg) rotateY(35deg);
    transform: rotateX(-65deg) rotateY(35deg);
}
.dot--aqua::before {
    background-color: aqua;
}
.dot--gold::before {
    background-color: gold;
}
.dot--tomato::before {
    background-color: tomato;
}
.dot:nth-child(1) {
    -webkit-animation-delay: 3.25s;
    animation-delay: 3.25s;
}
.dot:nth-child(2) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.dot:nth-child(3) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(4) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(5) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(6) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(7) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(8) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.dot:nth-child(9) {
    -webkit-animation-delay: 3.25s;
    animation-delay: 3.25s;
}
.dot:nth-child(10) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.dot:nth-child(11) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(12) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(13) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(14) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(15) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(16) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(17) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(18) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.dot:nth-child(19) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(20) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(21) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(22) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(23) {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.dot:nth-child(24) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(25) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(26) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(27) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(28) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(29) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(30) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(31) {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.dot:nth-child(32) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.dot:nth-child(33) {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.dot:nth-child(34) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(35) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(36) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(37) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(38) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(39) {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.dot:nth-child(40) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.dot:nth-child(41) {
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
}
.dot:nth-child(42) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.dot:nth-child(43) {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.dot:nth-child(44) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(45) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(46) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(47) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(48) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(49) {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.dot:nth-child(50) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.dot:nth-child(51) {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.dot:nth-child(52) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(53) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(54) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(55) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(56) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(57) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(58) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(59) {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
.dot:nth-child(60) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(61) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(62) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(63) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(64) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.dot:nth-child(65) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(66) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(67) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(68) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.dot:nth-child(69) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(70) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(71) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(72) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.dot:nth-child(73) {
    -webkit-animation-delay: 3.25s;
    animation-delay: 3.25s;
}
.dot:nth-child(74) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.dot:nth-child(75) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(76) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(77) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.dot:nth-child(78) {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.dot:nth-child(79) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
}
.dot:nth-child(80) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.dot:nth-child(81) {
    -webkit-animation-delay: 3.25s;
    animation-delay: 3.25s;
}

HTML