背景移動１-１■CSS box背景移動

●2016/05/05：CSSのみ使用なので、JavaScriptのグローバル変数はありません。
CSSだけを使用した背景移動です。
divで作成したbox空間での背景移動ですが、tableを作成して、tableに「class="ki"」を指定しても動作します。
背景画像に使用する画像も、div や table のサイズよりも大きくても動作します。
見本は、横幅626px縦幅469pxの大きな画像使用です。

移動の動きを CSS で
@keyframes bMove {
0% {background-position: 0 0;}
100% {background-position: 626px 469px;}
と指定します。
100%の位置で指定した「626px 469px」は見本で使用した背景画像の横幅と縦幅です。
背景画像のサイズで指定しないと、移動動作がなめらかになりません。

100% {background-position: 626px 0;}にすると、左から右への横移動、数値にマイナスを指定すると右から左への横移動、
100% {background-position: 0 469px;}にすると、上から下への縦移動、数値にマイナスを指定すると下から上への縦移動、
横幅と縦幅を記述すると、見本のような斜め移動、横幅と縦幅にマイナス指定すると逆向きの斜め移動になります。
ただしJavaScript使用時のような、垂直に近い斜め移動や水平に近い斜め移動はできません。ギクシャクします。

また「.ki{animation: bMove 8s linear infinite;～～～}」の「linear」を修正すると、速度変化を付けられます。
その修正方法は、Lopan.jp のanimationプロパティを参考にしてみて下さい。

JavaScript使用のbox背景移動はこちら　→　背景移動１■box背景移動

<!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 box背景移動</title>

<!--★ここからコピー-->
<style type="text/css"><!--
/*★移動領域boxの設定。.ki必須*/
.ki{
animation: bMove 8s linear infinite;/*★必須。移動の「bMove」の時間指定。1sは1秒*/
margin:100px auto 30px;/*★中央位置指定(上　左右　下)*/
background: url(fp8L.jpg);/*★背景画像指定。背景画像の実寸は横626px縦469px*/
width:350px;/*★横幅指定*/
height:200px;/*★縦幅指定*/
border:solid 2px #000;/*★枠線指定　黒色*/
text-align:center;/*★文字の中央位置指定*/
color:#fff;/*★文字色　白色*/
}

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

</head>
<body>

<!--★ここからコピー-->
<!--★移動領域の指定ここから。必ずclass="ki"を記述。後は自分の好みで-->
<div class="ki">
<br><br>
CONTENTS<br><br>
PROFILE<br>
BBS<br>
</div><!--★移動領域の指定ここまで-->

</body>
</html>

背景移動１-１■box背景移動 UP日時 : 2016/05/05

　背景移動１-１■box背景移動　　　　　UP日時 : 2016/05/05