Heim >Web-Frontend >HTML-Tutorial >So verschieben Sie Bilder in HTML nach oben und unten
So verschieben Sie Bilder in HTML nach oben und unten
- 青灯夜游Original
- 2021-12-14 16:52:0418257Durchsuche
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.
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>
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!