html画像を上下に動かす方法: 1. アニメーション属性を使用して、動くアニメーションを画像にバインドします。 2. 「@keyframes アニメーション名 {50%{transform:translateY (移動距離)」を使用します。 ;}}" このステートメントは、アニメーションの各フレームのアクションを定義し、画像の上下移動を制御します。
このチュートリアルの動作環境: 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 ビデオ チュートリアル"
以上がHTMLで画像を上下に動かす方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
