Tutorial zur Verwendung des CSS-Ladeanimationseffekts-CSS-Tutorial-php.cn

Tutorial zur Verwendung des CSS-Ladeanimationseffekts

php中世界最好的语言

Freigeben： 2018-03-20 17:23:31

Original

1717 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!