卡通刺猬加载滚动动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：卡通刺猬加载滚动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
html {
        -webkit-font-smoothing: antialiased;
}

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}

*:before,
*:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        content: "";
        position: absolute;
}

:root {
        --container-size: 120px;
        --inner-container-size: 74px;
        --stroke-size: 12px;
        --inner-stroke-size: 8px;

        --color-cream: #faddb4;
        --color-teal: #819679;
        --color-brown: #7a2d33;
        --color-sand: #ffac65;
        --color-orange: #fc6841;
}

body {
        width: 100vw;
        height: 100vh;
        background: var(--color-sand);
        display: flex;
        align-items: center;
        overflow: hidden;
}

body:before {
        position: absolute;
        width: 100%;
        height: 100vh;
        border: calc(var(--stroke-size) * 2) solid var(--color-cream);
        z-index: 200;
}

#armadillo {
        width: calc(var(--container-size) * 2);
        height: calc(var(--container-size) * 2);
        position: relative;
        overflow: hidden;
        animation: spin 1.5s ease-in-out infinite, move 4.5s ease-in-out infinite;
}

@keyframes spin {
        from {
                transform: rotate(0deg);
        }

        to {
                transform: rotate(360deg);
        }
}

@keyframes move {
        0% {
                left: calc(var(--container-size) * -2);
        }

        33.33% {
                left: 20%;
        }

        66.66% {
                left: 60%;
        }

        100% {
                left: calc(100% + calc(var(--container-size) * 2));
        }
}


@keyframes move-mobile {
        0% {
                left: calc(var(--container-size) * -2);
        }
                50% {
                left: calc(50% - var(--container-size));
        }

        100% {
                left: calc(100% + calc(var(--container-size) * 2));
        }
}

@media only screen and (max-width: 600px) {
#armadillo {
        animation: spin 1.5s ease-in-out infinite, move-mobile 3s ease-in-out infinite;
}
}



.resize-animation-stopper * {
        animation: none !important;
        transition: none !important;
}

#armadillo > div:not(#outer-spokes):not(#inner-circle):not(#moon) {
        width: var(--container-size);
        height: var(--container-size);
        overflow: hidden;
        position: absolute;
}

#quad-1 {
        top: 0;
        left: 0;
}

#quad-2 {
        bottom: 0;
        left: 0;
}

#quad-3,
#quad-1:before,
#quad-1:after,
#quad-1 .dots-container .dots,
#quad-1 #segment-1,
#quad-1 #segment-1 .stripes:before,
#quad-1 #segment-1 .stripes:after,
#quad-1 #segment-2,
#quad-1 #segment-2 #triangles,
#quad-1 #segment-2 #triangles:before,
#quad-1 #segment-2 #triangles:after,
#quad-1 #segment-1 .stripes-inner,
#quad-1 #segment-2 #triangles-inner,
#quad-1 .spoke,
#quad-2:before,
#quad-2:after {
        bottom: 0;
        right: 0;
}

#quad-4,
#quad-2 #segment-2:after,
#quad-2:before,
#quad-2:after,
#quad-2 .spikes,
#quad-2 .spikes:before,
#quad-2 .spikes:after,
#quad-2 .dots-container .dots,
#quad-2 #segment-2,
#quad-2 #segment-2:before,
#quad-2 #segment-2 #details,
#quad-2 #segment-1,
#quad-2 #segment-1 #segment-inner {
        top: 0;
        right: 0;
}

#quad-1 > #quad-1-spikes,
#quad-1 > #quad-1-spikes:before,
#quad-1 > #quad-1-spikes:after {
        width: var(--container-size);
        height: var(--inner-stroke-size);
        bottom: 0;
        right: 0;
        background: var(--color-orange);
        border-bottom-left-radius: var(--inner-stroke-size);
        transform-origin: center right;
}

#quad-1 > #quad-1-spikes {
        position: absolute;
        margin-bottom: calc(var(--inner-stroke-size) * -0.5);
        transform: rotate(45deg);
        overflow: visible;
        z-index: 100;
}

#quad-1 > #quad-1-spikes:before {
        transform: rotate(-22.5deg);
}

#quad-1 > #quad-1-spikes:after {
        transform: rotate(22.5deg);
}

#quad-1:before {
        width: calc(var(--container-size) - var(--inner-stroke-size));
        height: calc(var(--container-size) - var(--inner-stroke-size));
        border-top-left-radius: calc(var(--container-size) - var(--inner-stroke-size));
        background: var(--color-teal);
        border-left: var(--stroke-size) solid var(--color-cream);
        border-top: var(--stroke-size) solid var(--color-cream);
}

#quad-1:after {
        width: calc(var(--inner-container-size) + var(--inner-stroke-size));
        height: calc(var(--inner-container-size) + var(--inner-stroke-size));
        border-top-left-radius: calc(
                var(--inner-container-size) + var(--inner-stroke-size)
        );
        border-left: var(--inner-stroke-size) solid var(--color-orange);
        border-top: var(--inner-stroke-size) solid var(--color-orange);
}

#armadillo > div .dots-container {
        width: var(--container-size);
        height: var(--container-size);
        z-index: 100;
}

#armadillo > div .dots-container .dots {
        position: absolute;
        overflow: visible;
        z-index: 100;
        width: calc(var(--container-size) * 0.78);
        height: var(--inner-stroke-size);
}

#armadillo #quad-1 .dots-container .dots,
#armadillo #quad-2 .dots-container .dots {
        transform-origin: center right;
}

#armadillo #quad-1 .dots-container .dots:before,
#armadillo #quad-2 .dots-container .dots:before {
        left: 0;
}

#quad-1 .dots-container .dots {
        margin-bottom: calc(var(--inner-stroke-size) * -0.5);
}

#armadillo > div .dots-container .dots:before {
        width: var(--inner-stroke-size);
        height: var(--inner-stroke-size);
        border-radius: 50%;
}

#quad-1 .dots-container .dots {
        transform: rotate(11.25deg);
}

#quad-1 .dots-container .dots:nth-of-type(2) {
        transform: rotate(33.75deg);
}

#quad-1 .dots-container .dots:nth-of-type(3) {
        transform: rotate(56.25deg);
}

#quad-1 .dots-container .dots:nth-of-type(4) {
        transform: rotate(78.75deg);
}

#quad-1 .dots-container .dots:nth-of-type(even):before {
        background: var(--color-cream);
}

#quad-1 .dots-container .dots:nth-of-type(odd):before {
        background: var(--color-brown);
}

#quad-1 #segment-1 {
        transform: skewY(45deg);
        width: var(--inner-container-size);
        height: var(--inner-container-size);
        transform-origin: bottom right;
        position: absolute;
        overflow: hidden;
        z-index: 100;
}

.stripes {
        width: var(--inner-container-size);
        height: var(--inner-container-size);
        position: absolute;
        border: var(--inner-stroke-size) solid var(--color-brown);
}

#quad-1 #segment-1 .stripes {
        bottom: 0;
        right: 0;
        transform-origin: bottom right;
        border-top-left-radius: var(--inner-container-size);
        border-bottom: 0;
        border-right: 0;
        transform: skewY(-45deg);
        background: var(--color-sand);
}

.stripes:before,
.stripes:after {
        width: calc(var(--inner-container-size) * 0.6);
        position: absolute;
        transform: rotate(-22.5deg);
}

.stripes:after {
        height: calc(
                calc(var(--inner-container-size) * 0.75) +
                        calc(var(--inner-stroke-size) * 0.5)
        );
}

.stripes:before {
        height: calc(
                calc(var(--inner-container-size) * 0.6) + calc(var(--inner-stroke-size) * 0.5)
        );
}

#quad-1 #segment-1 .stripes:before,
#quad-1 #segment-1 .stripes:after {
        margin-right: calc(var(--inner-container-size) * -0.3);
        transform-origin: bottom center;
        border-top: calc(var(--inner-stroke-size) * 0.5) solid var(--color-brown);
}

#quad-1 #segment-1 .stripes:before {
        background: var(--color-orange);
}

#quad-1 #segment-1 .stripes-inner,
#quad-1 #segment-2 #triangles-inner,
#quad-2 #segment-2:after {
        margin-right: calc(var(--inner-stroke-size) * -3.25);
        margin-bottom: calc(var(--inner-stroke-size) * -3.25);
}

#quad-2 #segment-2:after {
        margin-right: calc(var(--inner-stroke-size) * -3.25);
        margin-top: calc(var(--inner-stroke-size) * -3.25);
}

.stripes-inner,
#quad-1 #segment-2 #triangles-inner,
#quad-2 #segment-2:after {
        position: absolute;
        width: calc(var(--inner-stroke-size) * 6.5);
        height: calc(var(--inner-stroke-size) * 6.5);
        background: var(--color-teal);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        border: var(--inner-stroke-size) solid var(--color-brown);
}

.stripes-inner:before {
        width: calc(var(--inner-container-size) * 0.6);
        height: calc(
                calc(var(--inner-container-size) * 0.68) +
                        calc(var(--inner-stroke-size) * 0.5)
        );
        position: absolute;
        transform: rotate(-22.5deg);
}

#quad-1 #segment-1 .stripes-inner:before {
        bottom: 0;
        transform-origin: bottom center;
        border-top: calc(var(--inner-stroke-size) * 0.5) solid var(--color-brown);
}

#quad-1 #segment-2 {
        transform: skewX(45deg);
        width: var(--inner-container-size);
        height: var(--inner-container-size);
        transform-origin: bottom right;
        position: absolute;
        overflow: hidden;
        z-index: 100;
}

#quad-1 #segment-2 #triangles {
        width: var(--inner-container-size);
        height: var(--inner-container-size);
        position: absolute;
        transform-origin: bottom right;
        border-top-left-radius: var(--inner-container-size);
        border: var(--inner-stroke-size) solid var(--color-brown);
        border-bottom: 0;
        border-right: 0;
        background: var(--color-cream);
        transform: skewX(-45deg);
}

#quad-1 #segment-2 #triangles:before {
        position: absolute;
        border-left: calc(var(--inner-stroke-size) * 3.2) solid var(--color-sand);
        border-top: var(--inner-stroke-size) solid transparent;
        border-bottom: var(--inner-stroke-size) solid transparent;
        width: 0;
        height: calc(var(--inner-stroke-size) * 2.8);
        padding-right: calc(var(--inner-stroke-size) * 4);
        margin-bottom: calc(var(--inner-stroke-size) * -1.25);
        transform-origin: center right;
        transform: rotate(22.5deg);
}

#quad-1 #segment-2 #triangles:after {
        width: 0;
        height: 0;
        border-top: calc(var(--inner-stroke-size) * 0.5) solid transparent;
        border-left: calc(var(--inner-stroke-size) * 1.6) solid var(--color-orange);
        border-bottom: calc(var(--inner-stroke-size) * 0.5) solid transparent;
        padding-right: calc(var(--inner-stroke-size) * 5);
        margin-bottom: calc(var(--inner-stroke-size) * -0.5);
        transform-origin: center right;
        transform: rotate(22.5deg);
}

#quad-1 .spoke {
        width: calc(var(--inner-stroke-size) * 6.5);
        height: calc(var(--inner-stroke-size) * 6.5);
        position: absolute;
        z-index: 100;
        margin-right: calc(var(--inner-stroke-size) * -3.25);
        margin-bottom: calc(var(--inner-stroke-size) * -3.25);
        border-radius: 50%;
        transform: rotate(-45deg);
}

#quad-1 .spoke:after {
        width: var(--inner-stroke-size);
        height: calc(
                var(--inner-container-size) - calc(var(--inner-stroke-size) * 2.5)
        );
        background: var(--color-brown);
        position: absolute;
        bottom: 0;
        z-index: 100;
        transform-origin: bottom center;
        margin-bottom: calc(100% - var(--inner-stroke-size));
        margin-left: calc(
                calc(var(--inner-stroke-size) * 3.25) - var(--inner-stroke-size) * 0.5
        );
}

#quad-2:before {
        width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
        height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
        border-bottom-left-radius: calc(
                var(--container-size) - calc(var(--inner-stroke-size) * 1.5)
        );
        background: var(--color-teal);
        border-left: var(--inner-stroke-size) solid var(--color-orange);
        border-bottom: var(--inner-stroke-size) solid var(--color-orange);
}

#quad-2:after {
        width: calc(var(--inner-container-size) + var(--inner-stroke-size));
        height: calc(var(--inner-container-size) + var(--inner-stroke-size));
        border-bottom-left-radius: calc(
                var(--inner-container-size) + var(--inner-stroke-size)
        );
        border-left: var(--inner-stroke-size) solid var(--color-orange);
        border-bottom: var(--inner-stroke-size) solid var(--color-orange);
}

#quad-3:before {
        top: 0;
        left: 0;
        width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
        height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
        border-bottom-right-radius: calc(
                var(--container-size) - calc(var(--inner-stroke-size) * 1.5)
        );
        background: var(--color-teal);
        border-right: var(--inner-stroke-size) solid var(--color-orange);
        border-bottom: var(--inner-stroke-size) solid var(--color-orange);
}

#quad-3:after {
        top: 0;
        left: 0;
        width: calc(var(--inner-container-size) + var(--inner-stroke-size));
        height: calc(var(--inner-container-size) + var(--inner-stroke-size));
        border-bottom-right-radius: calc(
                var(--inner-container-size) + var(--inner-stroke-size)
        );
        border-right: var(--inner-stroke-size) solid var(--color-sand);
        border-bottom: var(--inner-stroke-size) solid var(--color-sand);
}

#quad-3 > #segment-1 {
        transform: skewY(45deg);
        width: var(--inner-container-size);
        height: var(--inner-container-size);
        transform-origin: top left;
        position: absolute;
        overflow: hidden;
        z-index: 100;
}

#quad-3 > #segment-1 .stripes {
        width: var(--inner-container-size);
        height.........完整代码请登录后点击上方下载按钮下载查看