背景移動３-１■CSS空の全面背景移動

●2016/05/05：CSSのみ使用なので、JavaScriptのグローバル変数はありません。
CSSだけを使用した body の全面背景移動の、横移動です。
動いているのは背景画像なので、こんな風に上に文章が書けます。そして画像も置けます。船の画像はpngの背景透過画像です。
CSSの横移動、縦移動、斜め移動の書き方については、背景移動１-１■CSS box背景移動の説明から。
また「body{animation: bMove 9s linear infinite;～～～}」の「linear」を修正すると、速度変化を付けられます。
その修正方法は、Lopan.jp のanimationプロパティを参考にしてみて下さい。

JavaScript使用の全面背景移動はこちら　→　背景移動３■空の全面背景移動

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景移動３-１■CSS空の全面背景移動</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{
animation: bMove 9s linear infinite;/*★必須。移動の「bMove」の時間指定。1sは1秒*/
background: url(sora1.jpg);/*★背景画像指定。背景画像の実寸は横626px縦469px*/
}

/*★必須。移動の動きの指定。名前は「bMove」*/
@keyframes bMove {
0% {background-position: 0 0;}
100% {background-position: 626px 0;}/*★横移動の時は必ず使用する背景画像の横幅を記述。マイナス指定で逆向き*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<img src="gat_i1.png" style="position:absolute; top:200px; right:25%; width:250px; height:280px;"><!--★船の画像。この行は削除可能-->

</body>
</html>

背景移動３-１■空の全面背景移動 UP日時 : 2016/05/05

　背景移動３-１■空の全面背景移動　　　　　UP日時 : 2016/05/05