HTMLで画像を上下に動かす方法-htmlチュートリアル-php.cn

HTMLで画像を上下に動かす方法

青灯夜游

リリース： 2021-12-14 16:52:04

オリジナル

18201 人が閲覧しました

html画像を上下に動かす方法: 1. アニメーション属性を使用して、動くアニメーションを画像にバインドします。 2. 「@keyframes アニメーション名 {50%{transform:translateY (移動距離)」を使用します。 ;}}" このステートメントは、アニメーションの各フレームのアクションを定義し、画像の上下移動を制御します。

HTMLで画像を上下に動かす方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

HTML では、animation 属性と「@keyframes」を使用して、画像を上下に動かすアニメーションを作成できます。## を使用します。 #アニメーションでの変換:translateY()画像の動きを制御します。

実装コード:

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

ログイン後にコピー

HTMLで画像を上下に動かす方法