Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie CSS, um Links- und Rechtsbewegungseffekte zu erzielen
So verwenden Sie CSS, um Links- und Rechtsbewegungseffekte zu erzielen
- 青灯夜游Original
- 2021-07-14 17:45:143721Durchsuche
In CSS können Sie „@keyframes“-Regeln und Animationsattribute verwenden, um Links- und Rechtsbewegungseffekte zu erzielen. Die Hauptsyntax lautet „@keyframes Animationsname {0% {left:0px;}50%{left:200px;}.“ 100 % {left :0px;}}".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In CSS können Sie „@keyframes“-Regeln und Animationsattribute verwenden, um Links- und Rechtsbewegungseffekte zu erzielen.
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
0% {left:0px;}
50%{left:200px;}
100% {left:0px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0% {left:0px;}
50%{left:200px;}
100% {left:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
Beschreibung:
Mit @keyframes-Regeln können Sie Animationen erstellen. Animationen werden durch schrittweises Wechseln von einer CSS-Stileinstellung zur anderen erstellt.
Sie können die CSS-Stileinstellungen während des Animationsprozesses mehrmals ändern.
Geben Sie an, wann die Änderung erfolgt, indem Sie % oder die Schlüsselwörter „von“ und „bis“ verwenden, die 0 % bis 100 % entsprechen. 0 % bedeutet, dass die Animation beginnt, 100 % bedeutet, dass die Animation beendet ist.
Syntax:
@keyframes animationname {keyframes-selector {css-styles;}}| Wert | Beschreibung |
|---|---|
| Animationsname | erforderlich. Definieren Sie den Namen der Animation. Definiert durch das Animationsattribut. |
| keyframes-selector | Erforderlich. Prozentsatz der Animationsdauer. Rechtlicher Wert: 0-100 % Hinweis: Sie können animierte Keyframes-Selektoren verwenden. |
| CSS-Stile | erforderlich. Ein oder mehrere zulässige CSS-Stilattribute |
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um Links- und Rechtsbewegungseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!