Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Teilen Sie Beispiele für die Simulation von Sinus- und Kosinuskurven in CSS-Animationen

黄舟
Freigeben: 2017-10-08 09:33:56
Original
1935 Leute haben es durchsucht

Lassen Sie uns heute eine CSS3-Parabelanimation schreiben = =

Parabelanimation von links nach rechts, teilen wir die Aktion vorübergehend in eine gleichmäßige Bewegung nach rechts und eine Auf- und Abbewegung mit variabler Geschwindigkeit auf .

Für eine horizontale, gleichmäßige Bewegung können wir translatorX(x) verwenden: Definieren Sie eine 2D-Transformation und verschieben Sie Elemente entlang der X-Achse und linear: Die Geschwindigkeit der Animation ist von Anfang bis Ende gleich Diese beiden Eigenschaften können durch die Verwendung von translatorY(

y

) erreicht werden. out: Die Animation beginnt mit niedriger Geschwindigkeit und endet.

1.html

Bewegen Sie das p der Demobox mit konstanter Geschwindigkeit nach rechts, und das p der Demobox im Inneren kann sich nach oben und unten bewegen mit variabler Geschwindigkeit.
<div id="container">
      <div class="demobox">
           <div class="demo"></div>
      </div>
      <div class="demobox">
            <div class="demo"></div>
      </div>
</div>
Nach dem Login kopieren

2.css

ok, es kommt eine Sinus- und Kosinuskurve heraus @^-^@
#container {
    height:110px;
    font-size:0;
    width:140px;
}
.demobox {
    float:right;
    width:5px;
    height:5px;
    animation:myfirst1 linear 5s infinite;
    -webkit-animation:myfirst1 linear 5s infinite; 
}
.demo {
    width:6px;
    height:6px;
    border-radius:3px;
    background:#90e4e9;
    animation:myfirst2 ease-in-out 1s infinite alternate;
    -webkit-animation:myfirst2 ease-in-out 1s infinite alternate;  /*Safari and Chrome */
}

.demobox:nth-of-type(1) .demo:nth-of-type(1){
    animation-delay:0s;
}
.demobox:nth-of-type(2) .demo:nth-of-type(1){
   animation-delay:0.03s;
}

@keyframes myfirst1
{
    from {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
    }
    to {
        transform:translateX(1000px);
        -webkit-transform:translateX(1000px);
    }
    
}

@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
    from {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
    }
    to {
        transform:translateX(1000px);
        -webkit-transform:translateX(1000px);
    }
}
@keyframes myfirst2
{
    0% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    50% {
        transform:translateY(100px);
        -webkit-transform:translateY(100px);
    }
    100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
    0% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    50% {
        transform:translateY(100px);
        -webkit-transform:translateY(100px);
    }
    100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Simulation von Sinus- und Kosinuskurven in CSS-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!