Heim  >  Artikel  >  Web-Frontend  >  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:143659Durchsuche

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>

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

Stellungnahme:
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