ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLで画像を上下に動かす方法
HTMLで画像を上下に動かす方法
- 青灯夜游オリジナル
- 2021-12-14 16:52:0418257ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLでボタンのテキストを設定する方法次の記事：HTMLでボタンのテキストを設定する方法