So verwenden Sie CSS, um Links- und Rechtsbewegungseffekte zu erzielen-CSS-Tutorial-php.cn

So verwenden Sie CSS, um Links- und Rechtsbewegungseffekte zu erzielen

青灯夜游

Freigeben： 2021-07-14 17:45:14

Original

3718 Leute haben es durchsucht

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;}}".

So verwenden Sie CSS, um Links- und Rechtsbewegungseffekte zu erzielen

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>

Nach dem Login kopieren

Rendering:

So verwenden Sie CSS, um Links- und Rechtsbewegungseffekte zu erzielen

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;}}

Nach dem Login kopieren

Wert	Beschreibung
Animationsname	erforderlich. Definieren Sie den Namen der Animation. Definiert durch das Animationsattribut.
keyframes-selector	Erforderlich. Prozentsatz der Animationsdauer. Rechtlicher Wert: 0-100 % von (wie 0%) bis (100 % gleich) Hinweis: Sie können animierte Keyframes-Selektoren verwenden.
CSS-Stile	erforderlich. Ein oder mehrere zulässige CSS-Stilattribute

Wert

Beschreibung

Animationsname

erforderlich. Definieren Sie den Namen der Animation. Definiert durch das Animationsattribut.

keyframes-selector

Erforderlich. Prozentsatz der Animationsdauer.

Rechtlicher Wert:

0-100 %
von (wie 0%)
bis (100 % gleich)

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!