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;
}<🎜 in demo.css > Schreiben Sie
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="demo.css"/> </head> <body> <p></p> </body> </html>
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>
$('p').hover(function(){
$('p').addClass('over');},
function(){
$('p').removeClass('over');
});
</script>
</body>
</html>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;}
}p{
animation:chgbackground 3s;
}@frames chgbackground{
0%{background:yellow;}
50%{background:red;}
100%{background:black;}
}
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:
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!
