css实现三维搭积木loading加载动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现三维搭积木loading加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Varela+Round&amp;display=swap'>
  
<style>
* {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}
:root {
        --hue: 223;
        --bg: hsl(var(--hue),90%,90%);
        --fg: hsl(var(--hue),90%,10%);
        --primary: hsl(var(--hue),90%,55%);
        --red: hsl(3,90%,50%);
        --orange: hsl(33,90%,50%);
        --green: hsl(153,90%,30%);
        --purple: hsl(273,90%,50%);
        --magenta: hsl(303,90%,50%);
        --trans-dur: 0.3s;
        font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
        background-color: var(--bg);
        color: var(--fg);
        font: 1em/1.5 "Varela Round", sans-serif;
        height: 100vh;
        display: grid;
        place-items: center;
        transition:
                background-color var(--trans-dur),
                color var(--trans-dur);
}
main {
        padding: 1.5em 0;
}
.message {
        height: 1.5em;
        position: relative;
        text-align: center;
}
.message__line {
        animation: message-fade-in-out 5s linear;
        opacity: 0;
        position: absolute;
        inset: 0;
        text-align: center;
}
.message__line:nth-child(2) { animation-delay: 5s; }
.message__line:nth-child(3) { animation-delay: 10s; }
.message__line:nth-child(4) { animation-delay: 15s; }
.message__line:nth-child(5) { animation-delay: 20s; }
.message__line:nth-child(6) { animation-delay: 25s; }
.message__line:nth-child(7) { animation-delay: 30s; }

.message__line:last-child {
        animation-name: message-fade-in;
        animation-delay: 35s;
        animation-fill-mode: forwards;
}
.tower,
.tower__brick,
.tower__brick-layer,
.tower__brick-side,
.tower__brick-stud,
.tower__group {
        transform-style: preserve-3d;
}
.tower {
        margin: 0 auto 1.5em auto;
        position: relative;
        perspective: 800px;
        width: 16em;
        height: 16em;
}
.tower__brick,
.tower__brick-layer,
.tower__brick-side,
.tower__brick-stud,
.tower__group {
        position: absolute;
}
.tower__brick,
.tower__brick-side,
.tower__group {
        animation-duration: 16s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
}
.tower__brick,
.tower__brick-side {
        background-color: var(--primary);
}
.tower__brick {
        background-image: radial-gradient(100% 100% at center,hsla(0,0%,0%,0.3) 0.3em,hsla(0,0%,0%,0) 0.3em);
        background-size: 1em 1em;
        width: 2em;
        height: 1em;
}
.tower__brick-layer--4 {
        transform: translateZ(4.8em);
}
.tower__brick-layer--3 {
        transform: translateZ(3.6em);
}
.tower__brick-layer--2 {
        transform: translateZ(2.4em);
}
.tower__brick-layer--1 {
        transform: translateZ(1.2em);
}
.tower__brick-layer---1 {
        transform: translateZ(-1.2em);
}
.tower__brick-layer---2 {
        transform: translateZ(-2.4em);
}
.tower__brick-layer---3 {
        transform: translateZ(-3.6em);
}
.tower__brick-side {
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 1.2em;
        transform: rotateX(90deg);
        transform-origin: 50% 100%;
}
.tower__brick-side:nth-child(2) {
        top: 0;
        bottom: auto;
        left: 100%;
        width: 1.2em;
        height: 100%;
        transform: rotateY(90deg);
        transform-origin: 0 50%;
}
.tower__brick-side:nth-child(3) {
        top: 100%;
        left: 0;
        width: 100%;
        height: 1.2em;
        transform: rotateX(-90deg);
        transform-origin: 50% 0;
}
.tower__brick-side:nth-child(4) {
        top: 0;
        right: 100%;
        bottom: auto;
        left: auto;
        width: 1.2em;
        height: 100%;
        transform: rotateY(-90deg);
        transform-origin: 100% 50%;
}
.tower__brick-side:nth-child(even),
.tower__brick--90 .tower__brick-side:nth-child(odd),
.tower__brick--135 .tower__brick-side:nth-child(odd),
.tower__brick--270 .tower__brick-side:nth-child(odd),
.tower__brick--315 .tower__brick-side:nth-child(odd) {
        animation-name: brick-side-1;
        filter: brightness(0.5);
}
.tower__brick-side:nth-child(odd),
.tower__brick--90 .tower__brick-side:nth-child(even),
.tower__brick--135 .tower__brick-side:nth-child(even),
.tower__brick--270 .tower__brick-side:nth-child(even),
.tower__brick--315 .tower__brick-side:nth-child(even) {
        animation-name: brick-side-2;
        filter: brightness(0.75);
}
.tower__brick-stud {
        background-color: inherit;
        border-radius: 50%;
        top: 0.2em;
        left: 0.2em;
        width: 0.6em;
        height: 0.6em;
        transform: translateZ(0.2em);
}
.tower__brick-stud:nth-child(6) {
        left: 1.2em;
}
.tower__brick--0 {
        transform: translate3d(-1.5em,-1.5em,0);
}
.tower__brick--45 {
        transform: translate3d(-0.5em,-1.5em,0);
}
.tower__brick--90 {
        transform: translate3d(0,-1em,0) rotateZ(90deg);
}
.tower__brick--135 {
        transform: translate3d(0,0,0) rotateZ(90deg);
}
.tower__brick--180 {
        transform: translate3d(-0.5em,0.5em,0);
}
.tower__brick--225 {
        transform: translate3d(-1.5em,0.5em,0);
}
.tower__brick--270 {
        transform: translate3d(-2em,0,0) rotateZ(-90deg);
}
.tower__brick--315 {
        transform: translate3d(-2em,-1em,0) rotateZ(-90deg);
}
.tower__brick--red,
.tower__brick--red .tower__brick-side {
        background-color: var(--red);
}
.tower__brick--orange,
.tower__brick--orange .tower__brick-side {
        background-color: var(--orange);
}
.tower__brick--green,
.tower__brick--green .tower__brick-side {
        background-color: var(--green);
}
.tower__brick--purple,
.tower__brick--purple .tower__brick-side {
        background-color: var(--purple);
}
.tower__brick--magenta,
.tower__brick--magenta .tower__brick-side {
        background-color: var(--magenta);
}
.tower__brick--move1 { animation-name: brick-move-1; }
.tower__brick--move2 { animation-name: brick-move-2; }
.tower__brick--move3 { animation-name: brick-move-3; }
.tower__brick--move4 { animation-name: brick-move-4; }
.tower__brick--move5 { animation-name: brick-move-5; }
.tower__brick--move6 { animation-name: brick-move-6; }
.tower__brick--move7 { animation-name: brick-move-7; }
.tower__brick--move8 { animation-name: brick-move-8; }
.tower__brick--move9 { animation-name: brick-move-9; }
.tower__brick--move10 { animation-name: brick-move-10; }
.tower__brick--move11 { animation-name: brick-move-11; }
.tower__brick--move12 { animation-name: brick-move-12; }
.tower__brick--move13 { animation-name: brick-move-13; }
.tower__brick--move14 { animation-name: brick-move-14; }
.tower__brick--move15 { animation-name: brick-move-15; }
.tower__brick--move16 { animation-name: brick-move-16; }

.tower__group {
        animation-name: brick-group;
        top: 50%;
        left: 50%;
        transform: rotateX(45deg) rotateZ(45deg);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
        :root {
                --bg: hsl(var(--hue),90%,10%);
                --fg: hsl(var(--hue),90%,90%);
        }
}

/* Animations */
@keyframes brick-group {
        from { transform: rotateX(45deg) rotateZ(0.125turn) translateZ(0); }
        to { transform: rotateX(45deg) rotateZ(2.125turn) translateZ(-4.8em); }
}
@keyframes brick-side-1 {
        from, 25%, 50%, 75%, to { filter: brightness(0.5); }
        12.5%, 37.5%, 62.5%, 87.5% { filter: brightness(0.75); }
}
@keyframes brick-side-2 {
        from, 25%, 50%, 75%, to { filter: brightness(0.75); }
        12.5%, 37.5%, 62.5%, 87.5% { filter: brightness(0.5); }
}
@keyframes brick-move-1 {
        from { animation-timing-function: ease-in; transform: translate3d(0,0,0) rotateZ(90deg); }
        1.25% { animation-timing-function: linear; transform: translate3d(0,0,-0.4em) rotateZ(90deg); }
        2.5% { transform: translate3d(2em,0,-0.4em) rotateZ(90deg); }
        3.75% { transform: translate3d(2em,0,10em) rotateZ(90deg); }
        5% { animation-timing-function: ease-out; transform: translate3d(0,0,10em) rotateZ(90deg); }
        6.25%, to { transform: translate3d(0,0,9.6em) rotateZ(90deg); }
}
@keyframes brick-move-2 {
        from, 6.25% { animation-timing-function: ease-in; transform: translate3d(-0.5em,-1.5em,0); }
        7.5% { animation-timing-function: linear; transform: translate3d(-0.5em,-1.5em,-0.4em); }
        8.75% { transform: translate3d(-0.5em,-3.5em,-0.4em); }
        10% { transform: translate3d(-0.5em,-3.5em,10em); }
        11.25% { animation-timing-function: ease-out; transform: translate3d(-0.5em,-1.5em,10em); }
        12.5%, to { transform: translate3d(-0.5em,-1.5em,9.6em); }
}
@keyframes brick-move-3 {
        from, 12.5% { animation-timing-function: ease-in; transform: translate3d(-2em,-1em,0) rotateZ(-90deg); }
        13.75% { animation-timing-function: linear; transform: translate3d(-2em,-1em,-0.4em) rotateZ(-90deg); }
        15% { transform: translate3d(-4em,-1em,-0.4em) rotateZ(-90deg); }
        16.25% { transform: translate3d(-4em,-1em,10em) rotateZ(-90deg); }
        17.5% { animation-timing-function: ease-out; transform: translate3d(-2em,-1em,10em) rotateZ(-90deg); }
        18.75%, to { transform: translate3d(-2em,-1em,9.6em) rotateZ(-90deg); }
}
@keyframes brick-move-4 {
        from, 18.75% { animation-timing-function: ease-in; transform: translate3d(-1.5em,0.5em,0); }
        20% { animation-timing-function: linear; transform: translate3d(-1.5em,0.5em,-0.4em); }
        21.25% { transform: translate3d(-1.5em,2.5em,-0.4em); }
        22.5% { transform: translate3d(-1.5em,2.5em,10em); }
        23.75% { animation-timing-function: ease-out; transform: translate3d(-1.5em,0.5em,10em); }
        25%, to { transform: translate3d(-1.5em,0.5em,9.6em); }
}
@keyframes brick-move-5 {
        from, 25% { animation-timing-function: ease-in; transform: translate3d(0,-1em,0) rotateZ(90deg); }
        26.25% { animation-timing-function: linear; transform: translate3d(0,-1em,-0.4em) rotateZ(90deg); }
        27.5% { transform: translate3d(2em,-1em,-0.4em) rotateZ(90deg); }
        28.75% { transform: translate3d(2em,-1em,10em) rotateZ(90deg); }
        30% { animation-timing-function: ease-out; transform: translate3d(0,-1em,10em) rotateZ(90deg); }
        31.25%, to { transform: translate3d(0,-1em,9.6em) rotateZ(90deg); }
}
@keyframes brick-move-6 {
        from, 31.25% { animation-timing-function: ease-in; transform: translate3d(-1.5em,-1.5em,0); }
        32.5% { animation-timing-function: linear; transform: translate3d(-1.5em,-1.5em,-0.4em); }
        33.75% { transform: translate3d(-1.5em,-3.5em,-0.4em); }
        35% { transform: translate3d(-1.5em,-3.5em,10em); }
        36.25% { animation-timing-function: ease-out; transform: translate3d(-1.5em,-1.5em,10em); }
        37.5%, to { transform: translate3d(-1.5em,-1.5em,9.6em); }
}
@keyframes brick-move-7 {
        from, 37.5% { animation-timing-function: ease-in; transform: translate3d(-2em,0,0) rotateZ(-90deg); }
        38.75% { animation-timing-function: linear; transform: translate3d(-2em,0,-0.4em) rotateZ(-90deg); }
        40% { transform: translate3d(-4em,0,-0.4em) rotateZ(-90deg); }
        41.25% { transform: translate3d(-4em,0,10em) rotateZ(-90deg); }
        42.5% { animation-timing-function: ease-out; transform: translate3d(-2em,0,10em) rotateZ(-90deg); }
        43.75%, to { transform: translate3d(-2em,0,9.6em) rotateZ(-90deg); }
}
@keyframes brick-move-8 {
        from, 43.75% { animation-timing-function: ease-in; transform: translate3d(-0.5em,0.5em,0); }
        45% { animation-timing-function: linear; transform: translate3d(-0.5em,0.5em,-0.4em); }
        46.25% { transform: translate3d(-0.5em,2.5em,-0.4em); }
        47.5% { transform: translate3d(-0.5em,2.5em,10em); }
        48.75% { animation-timing-function: ease-out; tran.........完整代码请登录后点击上方下载按钮下载查看