So verschieben Sie Bilder in HTML nach oben und unten-HTML-Tutorial-php.cn

So verschieben Sie Bilder in HTML nach oben und unten

青灯夜游

Freigeben： 2021-12-14 16:52:04

Original

18203 Leute haben es durchsucht

So bewegen Sie ein Bild in HTML nach oben und unten: 1. Verwenden Sie das Animationsattribut, um eine sich bewegende Animation an das Bild zu binden. 2. Verwenden Sie den Animationsnamen „@keyframes“ {50%{transform:translateY(moving distance); }}"-Anweisung zum Definieren jeder Animation. Ein Aktionsrahmen, der das Bild so steuert, dass es sich nach oben und unten bewegt.

So verschieben Sie Bilder in HTML nach oben und unten

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In HTML können Sie animation属性和“@keyframes”创建一个图片上下移动的动画；动画中使用transform:translateY() verwenden, um die Bewegung von Bildern zu steuern.

Implementierungscode:

<!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 {
				50% {
					transform: translateY(100px);
				}
			}

			@-webkit-keyframes mymove/* Safari and Chrome */
			{
				50% {
					transform: translateY(100px);
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Nach dem Login kopieren

So verschieben Sie Bilder in HTML nach oben und unten

Empfohlenes Tutorial: „HTML-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo verschieben Sie Bilder in HTML nach oben und unten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!