Verwenden Sie CSS3, um Webseitenelemente durch Stile zu animieren-CSS-Tutorial-php.cn

Verwenden Sie CSS3, um Webseitenelemente durch Stile zu animieren

零下一度

Freigeben： 2017-04-22 13:41:22

Original

2319 Leute haben es durchsucht

Mit CSS3 können Sie Webelemente durch Stile animieren, ohne Javascript und Flash zu verwenden, wodurch die Website cooler wird.

CSS3-Übergang

Das trainsition-Attribut kann zum Stylen von Elementen verwendet werden. Die unterstützten Browser Zu den Schulungen gehören IE10, Firefox, Chrome und Opera.

Sehen wir uns zunächst einige Eigenschaften von trainsition an:

trainsition-property: Gibt den CSS-Attributnamen des Anwendungsübergangs an.

trainition-duration: Gibt den übermäßigen Zeitaufwand an.

trainsiton-timing-function: Gibt die Übergangszeitkurve an.

trainsition-delay: Gibt an, wann der Übergang beginnt.

Schauen Sie sich zunächst ein einfaches Übergangsbeispiel an, schreiben Sie

p{
width:100px;
height:100px;
background:red;
trainsition:width 3s,height 2s;//在这里为了方便，将过渡属性简写了，我们可以将过渡属性简写为trainsition:加上上面四个属性，可以把默认属性省略。
}

p:hover
{
width:300px;
height:200px;
}

Nach dem Login kopieren

<🎜 in demo.css > Schreiben Sie

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"  href="demo.css"/>
</head>
<body>

<p></p>

</body>
</html>

Nach dem Login kopieren

in demo.html. Bewegen Sie die Maus zum roten p-Block und Sie können sehen, dass die Länge und Breite des roten Blocks langsam zunimmt einfachste Umsetzung des Übergangs.

Hinweis: Wenn die Übergangszeit nicht eingestellt ist, ist sie standardmäßig 0. Es gibt einfach keinen Übergangseffekt.

Die Methode, die wir häufiger verwenden, besteht darin, Stile über js hinzuzufügen, um verschiedene Animationsübergänge wie folgt zu üben:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<style>
p{
   background:red;
   width:200px;
   height:200px;
   transition:width 2s,height 2s;
}
p.over{
width:300px;
height:300px;
}
</style>
</head>
 
<body>
<p 
</p>
<script> 
$(&#39;p&#39;).hover(function(){
  $(&#39;p&#39;).addClass(&#39;over&#39;);},
  function(){
    $(&#39;p&#39;).removeClass(&#39;over&#39;);
});
</script> 
</body>
</html>

Nach dem Login kopieren

Im geänderten Code wurde jquery verwendet, um den Over-Stil hinzuzufügen, wenn die Maus darüber bewegt wird, und der Over-Stil wurde entfernt, wenn die Maus wegging, da das Übergangsattribut im p festgelegt wurde Stil wurde die Übergangsanimation implementiert.

Obwohl die Stiländerung oben implementiert ist, können wir sehen, dass die Änderung von einem Anfangszustand zu einem Endzustand erfolgt und die Einschränkungen sehr groß sind Deshalb hoffe ich, dass es einen Zwischenzustand der Transformation geben wird. Zu diesem Zeitpunkt wird die Keyframe-Animation (@keyframes) verwendet:

Das Grundformat ist:

@keyframes Name｛

Zeitpunkt｛Elementstatus｝

....

｝

Zum Beispiel können wir

@frames chgground{
    from{ backgroud:red;}
    to{backgroud:yellow;}
}

Nach dem Login kopieren

verwenden, um die Keyframe-Animation zu definieren und sie dann an ein anzuwendendes Element zu binden, wie zum Beispiel:

p{
animation:chgbackground 3s;
}

Nach dem Login kopieren

Wir verwenden die Animation zum Binden:

p Dann können wir auch den Prozentsatz verwenden, um den Status des Keyframes anzugeben 0 % und % 100, der folgende Code

@frames chgbackground{  
0%{background:yellow;}  
50%{background:red;}  
100%{background:black;}  
}

Nach dem Login kopieren

t verwendet diesen Code, um unterschiedliche Verlaufseffekte des Hintergrunds von 0 % bis 50 % und 50 % bis 100 % zu erzielen.

Um animate.css zu verwenden, laden Sie einfach animate.css herunter, verweisen Sie auf die Datei und fügen Sie bei Bedarf spezifische Animationsklassennamen hinzu, um verschiedene Effekte zu erzielen, wie zum Beispiel:

< ;script>$( 'p').addClass('shake');Sie können ganz einfach Element-Shake-Effekte hinzufügen.

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Webseitenelemente durch Stile zu animieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!