纯css 加载代码

最新推荐文章于 2024-06-20 13:18:10 发布
最新推荐文章于 2024-06-20 13:18:10 发布
阅读量404 收藏 1
点赞数
分类专栏： 平时

 

 

<style>
        body {
            background-color: #f1f1f1;
            min-height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }

        section {
            flex: 1 1 25%;
        }

        .sk-rotating-plane {
            width: 4em;
            height: 4em;
            margin: auto;
            background-color: #b20000;
            -webkit-animation: sk-rotating-plane 1.2s infinite ease-in-out;
            animation: sk-rotating-plane 1.2s infinite ease-in-out;
        }

        @-webkit-keyframes sk-rotating-plane {
            0% {
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            }
            100% {
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }

        @keyframes sk-rotating-plane {
            0% {
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            }
            100% {
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }
        .sk-double-bounce {
            width: 4em;
            height: 4em;
            position: relative;
            margin: auto;
        }
        .sk-double-bounce .sk-child {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #b20000;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: sk-double-bounce 2.0s infinite ease-in-out;
            animation: sk-double-bounce 2.0s infinite ease-in-out;
        }
        .sk-double-bounce .sk-double-bounce-2 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        @-webkit-keyframes sk-double-bounce {
            0%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            50% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes sk-double-bounce {
            0%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            50% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
        .sk-wave {
            width: 6em;
            height: 4em;
            margin: auto;
            text-align: center;
            font-size: 1em;
        }
        .sk-wave .sk-rect {
            background-color: #b20000;
            height: 100%;
            width: .5em;
            display: inline-block;
            -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
            animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
        }
        .sk-wave .sk-rect-1 {
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
        }
        .sk-wave .sk-rect-2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }
        .sk-wave .sk-rect-3 {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }
        .sk-wave .sk-rect-4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
        .sk-wave .sk-rect-5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes sk-wave-stretch-delay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4);
                transform: scaleY(0.4);
            }
            20% {
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }
        }

        @keyframes sk-wave-stretch-delay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4);
                transform: scaleY(0.4);
            }
            20% {
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }
        }
        .sk-wandering-cubes {
            width: 4em;
            height: 4em;
            position: relative;
            margin: auto;
        }
        .sk-wandering-cubes .sk-cube {
            background-color: #b20000;
            width: 1em;
            height: 1em;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
            animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
        }
        .sk-wandering-cubes .sk-cube-2 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        @-webkit-keyframes sk-wandering-cubes {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            25% {
                -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
                transform: translateX(2em) rotate(-90deg) scale(0.5);
            }
            50% {
                /* Hack to make FF rotate in the right direction */
                -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
                transform: translateX(2em) translateY(2em) rotate(-179deg);
            }
            50.1% {
                -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
                transform: translateX(2em) translateY(2em) rotate(-180deg);
            }
            75% {
                -webkit-transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
                transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
            }
            100% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

        @keyframes sk-wandering-cubes {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            25% {
                -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
                transform: translateX(2em) rotate(-90deg) scale(0.5);
            }
            50% {
                /* Hack to make FF rotate in the right direction */
                -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
                transform: translateX(2em) translateY(2em) rotate(-179deg);
            }
            50.1% {
                -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
                transform: translateX(2em) translateY(2em) rotate(-180deg);
            }
            75% {
                -webkit-transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
                transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
            }
            100% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }
        .sk-spinner-pulse {
            width: 4em;
            height: 4em;
            margin: auto;
            background-color: #b20000;
            border-radius: 100%;
            -webkit-animation: sk-spinner-pulse 1.0s infinite ease-in-out;
            animation: sk-spinner-pulse 1.0s infinite ease-in-out;
        }

        @-webkit-keyframes sk-spinner-pulse {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }

        @keyframes sk-spinner-pulse {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 0;
            }
        }
        .sk-chasing-dots {
            width: 4em;
            height: 4em;
            position: relative;
            margin: auto;
            text-align: center;
            -webkit-animation: sk-chasing-dots-rotate 2s infinite linear;
            animation: sk-chasing-dots-rotate 2s infinite linear;
        }
        .sk-chasing-dots .sk-child {
            width: 2em;
            height: 2em;
            display: inline-block;
            position: absolute;
            top: 0;
            background-color: #b20000;
            border-radius: 100%;
            -webkit-animation: sk-chasing-dots-bounce 2s infinite ease-in-out;
            animation: sk-chasing-dots-bounce 2s infinite ease-in-out;
        }
        .sk-chasing-dots .sk-dot-2 {
            top: auto;
            bottom: 0;
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }

        @-webkit-keyframes sk-chasing-dots-rotate {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes sk-chasing-dots-rotate {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes sk-chasing-dots-bounce {
            0%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            50% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
        @keyframes sk-chasing-dots-bounce {
            0%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            50% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
        .sk-three-bounce {
            width: 8em;
            margin: auto;
            text-align: center;
        }
        .sk-three-bounce .sk-child {
            width: 2em;
            height: 2em;
            background-color: #b20000;
            border-radius: 100%;
            display: inline-block;
            -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
            animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
        }
        .sk-three-bounce .sk-bounce-1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }
        .sk-three-bounce .sk-bounce-2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes sk-three-bounce {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            40% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes sk-three-bounce {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            40% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
        .sk-circle-bounce {
            width: 4em;
            height: 4em;
            position: relative;
            margin: auto;
        }
        .sk-circle-bounce .sk-child {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .sk-circle-bounce .sk-child:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #b20000;
            border-radius: 100%;
            -webkit-animation: sk-circle-bounce-delay 1.2s infinite ease-in-out both;
            animation: sk-circle-bounce-delay 1.2s infinite ease-in-out both;
        }
        .sk-circle-bounce .sk-circle-2 {
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
        }
        .sk-circle-bounce .sk-circle-3 {
            -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
        }
        .sk-circle-bounce .sk-circle-4 {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        .sk-circle-bounce .sk-circle-5 {
            -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
        }
        .sk-circle-bounce .sk-circle-6 {
            -webkit-transform: rotate(150deg);
            transform: rotate(150deg);
        }
        .sk-circle-bounce .sk-circle-7 {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        .sk-circle-bounce .sk-circle-8 {
            -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
        }
        .sk-circle-bounce .sk-circle-9 {
            -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
        }
        .sk-circle-bounce .sk-circle-10 {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }
        .sk-circle-bounce .sk-circle-11 {
            -webkit-transform: rotate(300deg);
            transform: rotate(300deg);
        }
        .sk-circle-bounce .sk-circle-12 {
            -webkit-transform: rotate(330deg);
            transform: rotate(330deg);
        }
        .sk-circle-bounce .sk-circle-2:before {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }
        .sk-circle-bounce .sk-circle-3:before {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }
        .sk-circle-bounce .sk-circle-4:before {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
        .sk-circle-bounce .sk-circle-5:before {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }
        .sk-circle-bounce .sk-circle-6:before {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }
        .sk-circle-bounce .sk-circle-7:before {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
        .sk-circle-bounce .sk-circle-8:before {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }
        .sk-circle-bounce .sk-circle-9:before {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }
        .sk-circle-bounce .sk-circle-10:before {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }
        .sk-circle-bounce .sk-circle-11:before {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }
        .sk-circle-bounce .sk-circle-12:before {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }

        @-webkit-keyframes sk-circle-bounce-delay {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            40% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes sk-circle-bounce-delay {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            40% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
        .sk-cube-grid {
            width: 4em;
            height: 4em;
            margin: auto;
            /*
             * Spinner positions
             * 1 2 3
             * 4 5 6
             * 7 8 9
             */
        }
        .sk-cube-grid .sk-cube {
            width: 33%;
            height: 33%;
            background-color: #b20000;
            float: left;
            -webkit-animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
            animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
        }
        .sk-cube-grid .sk-cube-1 {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }
        .sk-cube-grid .sk-cube-2 {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
        .sk-cube-grid .sk-cube-3 {
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }
        .sk-cube-grid .sk-cube-4 {
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }
        .sk-cube-grid .sk-cube-5 {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }
        .sk-cube-grid .sk-cube-6 {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
        .sk-cube-grid .sk-cube-7 {
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }
        .sk-cube-grid .sk-cube-8 {
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }
        .sk-cube-grid .sk-cube-9 {
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        @-webkit-keyframes sk-cube-grid-scale-delay {
            0%, 70%, 100% {
                -webkit-transform: scale3D(1, 1, 1);
                transform: scale3D(1, 1, 1);
            }
            35% {
                -webkit-transform: scale3D(0, 0, 1);
                transform: scale3D(0, 0, 1);
            }
        }

        @keyframes sk-cube-grid-scale-delay {
            0%, 70%, 100% {
                -webkit-transform: scale3D(1, 1, 1);
                transform: scale3D(1, 1, 1);
            }
            35% {
                -webkit-transform: scale3D(0, 0, 1);
                transform: scale3D(0, 0, 1);
            }
        }
        .sk-fading-circle {
            width: 4em;
            height: 4em;
            position: relative;
            margin: auto;
        }
        .sk-fading-circle .sk-circle {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .sk-fading-circle .sk-circle:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #b20000;
            border-radius: 100%;
            -webkit-animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
            animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
        }
        .sk-fading-circle .sk-circle-2 {
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
        }
        .sk-fading-circle .sk-circle-3 {
            -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
        }
        .sk-fading-circle .sk-circle-4 {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        .sk-fading-circle .sk-circle-5 {
            -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
        }
        .sk-fading-circle .sk-circle-6 {
            -webkit-transform: rotate(150deg);
            transform: rotate(150deg);
        }
        .sk-fading-circle .sk-circle-7 {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        .sk-fading-circle .sk-circle-8 {
            -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
        }
        .sk-fading-circle .sk-circle-9 {
            -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
        }
        .sk-fading-circle .sk-circle-10 {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }
        .sk-fading-circle .sk-circle-11 {
            -webkit-transform: rotate(300deg);
            transform: rotate(300deg);
        }
        .sk-fading-circle .sk-circle-12 {
            -webkit-transform: rotate(330deg);
            transform: rotate(330deg);
        }
        .sk-fading-circle .sk-circle-2:before {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }
        .sk-fading-circle .sk-circle-3:before {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }
        .sk-fading-circle .sk-circle-4:before {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
        .sk-fading-circle .sk-circle-5:before {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }
        .sk-fading-circle .sk-circle-6:before {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }
        .sk-fading-circle .sk-circle-7:before {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
        .sk-fading-circle .sk-circle-8:before {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }
        .sk-fading-circle .sk-circle-9:before {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }
        .sk-fading-circle .sk-circle-10:before {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }
        .sk-fading-circle .sk-circle-11:before {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }
        .sk-fading-circle .sk-circle-12:before {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }

        @-webkit-keyframes sk-fading-circle-delay {
            0%, 39%, 100% {
                opacity: 0;
            }
            40% {
                opacity: 1;
            }
        }

        @keyframes sk-fading-circle-delay {
            0%, 39%, 100% {
                opacity: 0;
            }
            40% {
                opacity: 1;
            }
        }
        .sk-folding-cube {
            width: 4em;
            height: 4em;
            position: relative;
            margin: auto;
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }
        .sk-folding-cube .sk-cube {
            float: left;
            width: 50%;
            height: 50%;
            position: relative;
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
        .sk-folding-cube .sk-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #b20000;
            -webkit-animation: sk-folding-cube-angle 2.4s infinite linear both;
            animation: sk-folding-cube-angle 2.4s infinite linear both;
            -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
        }
        .sk-folding-cube .sk-cube-2 {
            -webkit-transform: scale(1.1) rotateZ(90deg);
            transform: scale(1.1) rotateZ(90deg);
        }
        .sk-folding-cube .sk-cube-3 {
            -webkit-transform: scale(1.1) rotateZ(180deg);
            transform: scale(1.1) rotateZ(180deg);
        }
        .sk-folding-cube .sk-cube-4 {
            -webkit-transform: scale(1.1) rotateZ(270deg);
            transform: scale(1.1) rotateZ(270deg);
        }
        .sk-folding-cube .sk-cube-2:before {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
        .sk-folding-cube .sk-cube-3:before {
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }
        .sk-folding-cube .sk-cube-4:before {
            -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
        }

        @-webkit-keyframes sk-folding-cube-angle {
            0%, 10% {
                -webkit-transform: perspective(140px) rotateX(-180deg);
                transform: perspective(140px) rotateX(-180deg);
                opacity: 0;
            }
            25%, 75% {
                -webkit-transform: perspective(140px) rotateX(0deg);
                transform: perspective(140px) rotateX(0deg);
                opacity: 1;
            }
            90%, 100% {
                -webkit-transform: perspective(140px) rotateY(180deg);
                transform: perspective(140px) rotateY(180deg);
                opacity: 0;
            }
        }

        @keyframes sk-folding-cube-angle {
            0%, 10% {
                -webkit-transform: perspective(140px) rotateX(-180deg);
                transform: perspective(140px) rotateX(-180deg);
                opacity: 0;
            }
            25%, 75% {
                -webkit-transform: perspective(140px) rotateX(0deg);
                transform: perspective(140px) rotateX(0deg);
                opacity: 1;
            }
            90%, 100% {
                -webkit-transform: perspective(140px) rotateY(180deg);
                transform: perspective(140px) rotateY(180deg);
                opacity: 0;
            }
        }
    </style>

 

<body>
<!-- / 1 -->
<section>
    <div class='sk-rotating-plane'></div>
</section>
<!-- / 2 -->
<section>
    <div class='sk-double-bounce'>
        <div class='sk-child sk-double-bounce-1'></div>
        <div class='sk-child sk-double-bounce-2'></div>
    </div>
</section>
<!-- / 3 -->
<section>
    <div class='sk-wave'>
        <div class='sk-rect sk-rect-1'></div>
        <div class='sk-rect sk-rect-2'></div>
        <div class='sk-rect sk-rect-3'></div>
        <div class='sk-rect sk-rect-4'></div>
        <div class='sk-rect sk-rect-5'></div>
    </div>
</section>
<!-- / 4 -->
<section>
    <div class='sk-wandering-cubes'>
        <div class='sk-cube sk-cube-1'></div>
        <div class='sk-cube sk-cube-2'></div>
    </div>
</section>
<!-- / 5 -->
<section>
    <div class='sk-spinner sk-spinner-pulse'></div>
</section>
<!-- / 6 -->
<section>
    <div class='sk-chasing-dots'>
        <div class='sk-child sk-dot-1'></div>
        <div class='sk-child sk-dot-2'></div>
    </div>
</section>
<!-- / 7 -->
<section>
    <div class='sk-three-bounce'>
        <div class='sk-bounce-1 sk-child'></div>
        <div class='sk-bounce-2 sk-child'></div>
        <div class='sk-bounce-3 sk-child'></div>
    </div>
</section>
<!-- / 8 -->
<section>
    <div class='sk-circle-bounce'>
        <div class='sk-child sk-circle-1'></div>
        <div class='sk-child sk-circle-2'></div>
        <div class='sk-child sk-circle-3'></div>
        <div class='sk-child sk-circle-4'></div>
        <div class='sk-child sk-circle-5'></div>
        <div class='sk-child sk-circle-6'></div>
        <div class='sk-child sk-circle-7'></div>
        <div class='sk-child sk-circle-8'></div>
        <div class='sk-child sk-circle-9'></div>
        <div class='sk-child sk-circle-10'></div>
        <div class='sk-child sk-circle-11'></div>
        <div class='sk-child sk-circle-12'></div>
    </div>
</section>
<!-- / 9 -->
<section>
    <div class='sk-cube-grid'>
        <div class='sk-cube sk-cube-1'></div>
        <div class='sk-cube sk-cube-2'></div>
        <div class='sk-cube sk-cube-3'></div>
        <div class='sk-cube sk-cube-4'></div>
        <div class='sk-cube sk-cube-5'></div>
        <div class='sk-cube sk-cube-6'></div>
        <div class='sk-cube sk-cube-7'></div>
        <div class='sk-cube sk-cube-8'></div>
        <div class='sk-cube sk-cube-9'></div>
    </div>
</section>
<!-- / 10 -->
<section>
    <div class='sk-fading-circle'>
        <div class='sk-circle sk-circle-1'></div>
        <div class='sk-circle sk-circle-2'></div>
        <div class='sk-circle sk-circle-3'></div>
        <div class='sk-circle sk-circle-4'></div>
        <div class='sk-circle sk-circle-5'></div>
        <div class='sk-circle sk-circle-6'></div>
        <div class='sk-circle sk-circle-7'></div>
        <div class='sk-circle sk-circle-8'></div>
        <div class='sk-circle sk-circle-9'></div>
        <div class='sk-circle sk-circle-10'></div>
        <div class='sk-circle sk-circle-11'></div>
        <div class='sk-circle sk-circle-12'></div>
    </div>
</section>
<!-- / 11 -->
<section>
    <div class='sk-folding-cube'>
        <div class='sk-cube sk-cube-1'></div>
        <div class='sk-cube sk-cube-2'></div>
        <div class='sk-cube sk-cube-4'></div>
        <div class='sk-cube sk-cube-3'></div>
    </div>
</section>

</body>

 

XXYsunlight
关注
专栏目录
纯css实现加载动画代码？
weixin_45651609的博客
08-16 234
HTML CSS 考察点 1.CSS3 动画 CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。CSS3 @keyframes 规则 要创建 CSS3 动画，你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一
纯CSS3加载动画Loading特效特效代码
03-20
"纯CSS3加载动画Loading特效特效代码"集合提供了超过30种不同的加载动画效果，全部基于CSS3技术实现，无需依赖JavaScript或者其他外部库，这使得它们对性能友好且易于集成到各种项目中。 首先，我们要理解CSS3是...
28个纯css3 loading
01-03
28个纯css3 加载loading动画特效，只需要引入CSS3文件 方便使用。
代码动态加载css
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
02-03 4857
/*代码动态加载css*/ function loadCSS(url) { let css = document.createElement("link"); css.type = "text/css"; css.rel = "stylesheet"; css.href = url; document.querySelector("head").appendChild(css); }
纯 CSS 实现十个不错的 Loading 效果！
最新发布
zz_jesse的博客
06-20 499
作者：Jimmyhttps://juejin.cn/post/7080542771387301896在推特上面看到 T. Afif[1] 介绍的十个 Loading 效果。如上图。Yeah，很赞哦，挺实用的，遂记录下来。为保证运行正常，咱先规定下：*{ box-sizing:border-box; }1. 平滑加载<divclass="progress-1"></div...
纯CSS加载中代码示例
Bonjours的专栏
12-23 306
<!DOCTYPE html> <html lang="en"> <head> <title>加载中示例</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&g...
加载CSS的四种方式以及CSS代码格式
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
09-26 1191
css_1.html --> <!-- 注意： 样式优先级： 由上到下，由外到内，优先级由低到高。 --> /*div{ color: blue; background-color: purple; }*/ @import
CSS3实现加载效果
未思
03-16 1006
预期实现的效果如下如所示 首先基本的Html布局如下 &lt;div id="wrap" &gt; &lt;div class="line1"&gt;&lt;/div&gt; &lt;div class="line2"&gt;&lt;/div&gt; &lt;div class="line3"&
纯CSS3加载动画Loading特效代码.zip
07-11
本资源“纯CSS3加载动画Loading特效代码.zip”提供了30多种不同的加载动画效果，完全基于CSS3技术实现，无需JavaScript或者其他额外的库，这使得这些加载动画轻量级且易于集成到任何项目中。 首先，我们来了解CSS3...
纯CSS3加载动画Loading特效代码
06-24
纯CSS3加载动画Loading特效代码是一种利用现代浏览器对CSS3特性的支持，创建出各种动态、视觉吸引人的加载效果的技术。这些加载动画通常用于网页内容加载完毕前，为用户提供一个反馈，表明页面正在处理或数据正在...
纯CSS3 Loading文字加载动效
04-25
总的来说，纯CSS3 Loading文字加载动效是利用CSS3的强大功能来实现的一种高效、无JavaScript依赖的加载效果，它展示了现代Web开发中的动画设计趋势，同时也为开发者提供了更多的创意空间。通过深入理解和运用这些CSS...
加载网络图片
08-10
NULL 博文链接：https://dong-android.iteye.com/blog/2207520
网页跳转代码和加载代码
12-15
js实现的页面加载页，包括按钮等待，指定div等待，全屏等待
css3实现的各种加载中动画
08-30
css3实现的各种loading动画，调整动画颜色大小
css做一个完整的动态页面,CSS3实现页面加载效果的完整代码
weixin_33484805的博客
08-04 1132
CSS3实现页面加载效果的完整代码发布时间：2020-04-16 11:54:38来源：亿速云阅读：159作者：小新今天小编给大家分享的是CSS3实现页面加载效果的完整代码，很多人都不太了解，今天小编为了让大家更加了解CSS3实现页面加载效果，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。对于页面加载的动画我们可以做成不同形状的效果，今天要分享的案例是将动画做成圆形的形状来加载页面，...
页面加载 等待css,css3 loading等待加载代码
weixin_39653766的博客
08-03 324
css3 loading等待加载代码 - 何问起@keyframes move {from {transform: translate(0,50%);}to {transform: translate(0,850%);}}* {margin: 0;padding: 0;}body {min-width: 325px;height: 100vh;display: flex;flex-wrap: wr...
用html和css实现一个加载页面【究极简单】
z2000ky的博客
01-09 1208
要创建一个简单的加载页面，你可以使用 HTML 和 CSS 来设计。），并且有一个显示 “Loading…整个页面被居中显示。文件，就可以看到加载页面效果。根据实际需求，你可以对样式进行自定义修改。这个例子中，使用了一个简单的旋转的加载动画（CSS 中的。你可以将上述代码保存到两个文件中，一个是。，然后在浏览器中打开。
网络加载 转圈 最简单写法 dialog
博水之野，人杰地灵
11-16 874
1，首先在res文件夹下创建一个名字为anim的文件夹，名字不要写错在anim里面创建一个xlm文件：img_animation.xml，这个名字随便写都可以，注意不要大写，里面的代码如下： <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/andro
c/c++中如何实现动态库动态加载（含完整工程示例代码）
热门推荐
技术需要分享
09-22 1万+
本文将win、linux加载、卸载动态库，并从动态库链接模块中获取类实例或函数地址等封装成统一的API接口，并集成在dllLoad.h/dllLoad.cpp中实现。构建一个注册类RegisterM，内置一个map容器，用来装载加载的动态库模块，并统一提供模块索引、及从模块中实现类实例获取、删除、函数地址获取等功能。 在动态库实现方面，提供一个虚拟元类MetaObject，然后在库的cpp文件中建立子类继承该类，实现其具体功能，并在cpp文件中直接提供函数API
纯CSS实现爱心加载效果代码分享
"纯css写出爱心版加载效果的示例代码" 在网页设计中，吸引用户的注意力并提供良好的用户体验是至关重要的。一个独特的加载动画可以有效地抓住用户的眼球，增加他们对网站的好感度，特别是在页面加载时间较长时。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值