Heim > Artikel > Web-Frontend > Tutorial zur Verwendung des CSS-Ladeanimationseffekts

Tutorial zur Verwendung des CSS-Ladeanimationseffekts

php中世界最好的语言Original: 2018-03-20 17:23:311673Durchsuche

Dieses Mal bringe ich Ihnen ein Tutorial zur Verwendung des CSS-Ladeanimationseffekts. Was sind die Vorsichtsmaßnahmen , wenn Sie den CSS-Ladeanimationseffekt verwenden? sehen.

In diesem Artikel wird ein reines CSS-Ladeeffekt-Codebeispiel vorgestellt, das Sie mit allen teilen können. Die Details sind wie folgt:

Vorschau

Code

Verwenden von CSS-Keyframes zum Anpassen von Keyframe-Animationen

<!DOCTYPE html>  
<html lang="en">  
    <head>
        <title>Loading</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            p#preload {
    margin: auto;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999999
}
p#preload>img {  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%)
}
p#preload .cssload-loader {  
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 62px;
    height: 62px;
    top: 50%;
    margin-top: -31px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    perspective: 780px
}
p#preload .cssload-inner {  
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%
}
p#preload .cssload-inner.cssload-one {  
    left: 0;
    top: 0;
    animation: cssload-rotate-one 1.15s linear infinite;
    -o-animation: cssload-rotate-one 1.15s linear infinite;
    -ms-animation: cssload-rotate-one 1.15s linear infinite;
    -webkit-animation: cssload-rotate-one 1.15s linear infinite;
    -moz-animation: cssload-rotate-one 1.15s linear infinite;
    border-bottom: 3px solid #000
}
p#preload .cssload-inner.cssload-two {  
    right: 0;
    top: 0;
    animation: cssload-rotate-two 1.15s linear infinite;
    -o-animation: cssload-rotate-two 1.15s linear infinite;
    -ms-animation: cssload-rotate-two 1.15s linear infinite;
    -webkit-animation: cssload-rotate-two 1.15s linear infinite;
    -moz-animation: cssload-rotate-two 1.15s linear infinite;
    border-right: 3px solid #000
}
p#preload .cssload-inner.cssload-three {  
    right: 0;
    bottom: 0;
    animation: cssload-rotate-three 1.15s linear infinite;
    -o-animation: cssload-rotate-three 1.15s linear infinite;
    -ms-animation: cssload-rotate-three 1.15s linear infinite;
    -webkit-animation: cssload-rotate-three 1.15s linear infinite;
    -moz-animation: cssload-rotate-three 1.15s linear infinite;
    border-top: 3px solid #000
}
@keyframes cssload-rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
    }
}
@-o-keyframes cssload-rotate-one {
    0% {
        -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
    }
    100% {
        -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
    }
}
@-ms-keyframes cssload-rotate-one {
    0% {
        -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
    }
    100% {
        -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
    }
}
@-webkit-keyframes cssload-rotate-one {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
    }
    100% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
    }
}
@-moz-keyframes cssload-rotate-one {
    0% {
        -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
    }
    100% {
        -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
    }
}
@keyframes cssload-rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
    }
}
@-o-keyframes cssload-rotate-two {
    0% {
        -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
    }
    100% {
        -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
    }
}
@-ms-keyframes cssload-rotate-two {
    0% {
        -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
    }
    100% {
        -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
    }
}
@-webkit-keyframes cssload-rotate-two {
    0% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
    }
    100% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
    }
}
@-moz-keyframes cssload-rotate-two {
    0% {
        -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
    }
    100% {
        -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
    }
}
@keyframes cssload-rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
    }
}
@-o-keyframes cssload-rotate-three {
    0% {
        -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
    }
    100% {
        -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
    }
}
@-ms-keyframes cssload-rotate-three {
    0% {
        -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
    }
    100% {
        -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
    }
}
@-webkit-keyframes cssload-rotate-three {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
    }
    100% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
    }
}
@-moz-keyframes cssload-rotate-three {
    0% {
        -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
    }
    100% {
        -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
    }
}
        </style>
    </head>
    <body>
    <p id="preload">
                    <p class="cssload-loader">
                <p class="cssload-inner cssload-one"></p>
                <p class="cssload-inner cssload-two"></p>
                <p class="cssload-inner cssload-three"></p>
            </p>
    </p>
    </body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den linearen Farbverlauf von CSS3

Detaillierte Erklärung der Maske- Bildattribut von CSS

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung des CSS-Ladeanimationseffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS3-Rem-Tutorial (Schriftgröße festlegen).Nächster Artikel：CSS3-Rem-Tutorial (Schriftgröße festlegen).

In Verbindung stehende Artikel

Mehr sehen