Heim > Artikel > Web-Frontend > CSS3-Animation (1): 5 Animationseffekte vorab laden

CSS3-Animation (1): 5 Animationseffekte vorab laden

高洛峰Original: 2017-02-17 13:21:011914Durchsuche

Erzielen Sie den Animationseffekt wie im Bild gezeigt:

CSS3动画（一）：5种预载动画效果

Animation 1 vorladen: Doppelter rotierender Kreis

Ein Kreis, der sich in zwei verschiedene Richtungen dreht. Wir definieren einen CSS-Code für die Geschwindigkeit des Innenrings, d. h. die Geschwindigkeit des Innenrings ist doppelt so hoch wie die des Außenrings.
Die Implementierung ist wie in der Abbildung dargestellt:

CSS3动画（一）：5种预载动画效果

HTML-Code:

<body style="background: #ffb83c;">
    <p id="preloader-1">
        <span></span>
        <span></span>
    </p></body>

CSS-Code:

#preloader-1{
    position: relative;
}#preloader-1 span{
    position: absolute;
    border:8px solid #fff;
    border-top:8px solid transparent;
    border-radius: 999px;
}#preloader-1 span:nth-child(1){
    width:80px;
    height: 80px;
    animation: spin-1 2s infinite linear;
}#preloader-1 span:nth-child(2){
    top:20px;
    left:20px;
    width:40px;
    height: 40px;
    animation: spin-2 1s infinite linear;
}@keyframes spin-1{
    0%{transform: rotate(360deg); opacity: 1.0;}
    50%{transform: rotate(180deg); opacity: 0.5;}
    100%{transform: rotate(0deg);opacity: 0;}}
@keyframes spin-2{
    0%{transform: rotate(0deg); opacity: 0.5;}
    50%{transform: rotate(180deg); opacity: 1;}
    100%{transform: rotate(360deg);opacity: 0.5;}}

Vorinstallierte Animation 2: Interlaced-Kreise

Zwei Kreise bewegen sich horizontal hin und her. Für jeden Kreis sind eigene Parameter für die Rückwärtsbewegungsanimation festgelegt.
Effekt:

CSS3动画（一）：5种预载动画效果

HTML-Code:

<body style="background: #4ad3b4;">
    <p id="preloader-2">
        <span></span>
        <span></span>
    </p></body>

CSS-Code:

#preloader-2{
    position: relative;
}#preloader-2 span{
    position: absolute;
    width:30px;
    height: 30px;
    background: #fff;
    border-radius: 999px;
}#preloader-2 span:nth-child(1){
    animation: cross-1 1.5s infinite linear;
}#preloader-2 span:nth-child(2){
    animation: cross-2 1.5s infinite linear;
}@keyframes cross-1{
    0%{transform: translateX(0); opacity: 0.5;}
    50%{transform: translateX(80px); opacity: 1;}
    100%{transform: translateX(0);opacity: 0.5;}}
@keyframes cross-2{
    0%{transform: translateX(80px); opacity: 0.5;}
    50%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(80px);opacity: 0.5;}}

Animation drei vorladen: rotierender Kreis

Effekt:

CSS3动画（一）：5种预载动画效果

HTML-Code:

<body style="background: #ab69d9;">
    <p id="preloader-3">
        <span></span>
    </p></body>

CSS-Code:

#preloader-3{
    position: relative;
    width:80px;
    height: 80px;
    border:4px solid rgba(255,255,255,.25);
    border-radius: 999px;
    
}#preloader-3 span{
    position: absolute;
    width:80px;
    height:80px;
    border:4px solid transparent;
    border-top:4px solid #fff;
    border-radius: 999px;
    top:-4px;
    left:-4px;
    animation: rotate 1s infinite linear;
}@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}}

Animation vier vorladen: Springen Kreis

Dies ist ein mexikanischer Wellenmuster-Animationseffekt, der durch Einstellen der Verzögerungsparameter zwischen verschiedenen Kreisen erreicht wird.
Effekt:

CSS3动画（一）：5种预载动画效果

HTML-Code:

<body style="background: #c1d64a;">
    <p id="preloader-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p></body>

CSS-Code:

#preloader-4{
    position: relative;
}#preloader-4 span{
    position:absolute;
    width:16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    animation: bounce 1s infinite linear;
}#preloader-4 span:nth-child(1){
    left:0;
    animation-delay: 0s;
}#preloader-4 span:nth-child(2){
    left:20px;
    animation-delay: 0.25s;
}#preloader-4 span:nth-child(3){
    left:40px;
    animation-delay: 0.5s;
}#preloader-4 span:nth-child(4){
    left:60px;
    animation-delay: 0.75s;
}#preloader-4 span:nth-child(5){
    left:80px;
    animation-delay: 1.0s;
}@keyframes bounce{
    0%{transform: translateY(0px);opacity: 0.5;}
    50%{transform: translateY(-30px);opacity: 1.0;}
    100%{transform: translateY(0px);opacity: 0.5;}}

Animation fünf vorladen: Radarkreis

Ein Radarstrahlungseffekt, stellen Sie den gleichen Ein- und Ausblendeffekt für 3 ein span elements, Dies kann jeweils mit einer leichten Verzögerung erreicht werden.
Effekt:

CSS3动画（一）：5种预载动画效果

HTML-Code:

<body style="background: #f9553f;">
    <p id="preloader-5">
        <span></span>
        <span></span>
        <span></span>
    </p></body>

CSS-Code:

#preloader-5{
    position: relative;
}#preloader-5 span{
    position:absolute;
    width:50px;
    height: 50px;
    border:5px solid #fff;
    border-radius: 999px;
    opacity: 0;
    animation: radar 2s infinite linear;
}#preloader-5 span:nth-child(1){
    animation-delay: 0s;
}#preloader-5 span:nth-child(2){
    
    animation-delay: 0.66s;
}#preloader-5 span:nth-child(3){
    animation-delay: 1.33s;
}@keyframes radar{
    0%{transform: scale(0);opacity: 0;}
    25%{transform: scale(0);opacity: 0.5;}
    50%{transform: scale(1);opacity: 1.0;}
    75%{transform: scale(1.5);opacity: 0.5;}
    100%{transform: scale(2);opacity: 0;}}

Weitere CSS3-Animationen (1): 5 vorinstallierte Animationseffekte. Für verwandte Artikel achten Sie bitte auf die chinesische PHP-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：Detaillierte CSS3-Erklärung: transformierenNächster Artikel：Detaillierte CSS3-Erklärung: transformieren

In Verbindung stehende Artikel

Mehr sehen