HTML5+CSS3―アニメーション０３

HTML5 授業



水平移動（連続移動背景）


  • 画像の横幅が移動するために要する時間を設定する/li>


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>無限背景</title>

<!-- HTML5のIE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,secton{ display: block;}
</style>

<style>
body {
background-image:url(img2/panorama.jpg);
background-repeat: repeat-x;
-webkit-animation:bk_move 360s linear 0 infinite;
}
@-webkit-keyframes'bk_move' {
from {
background-positon-x: left;
}
to {
background-position-x: 2753px;
}
}
</style>

</head>
<body>

</body>
</html>


ブラウザで表示【 Chrome 】

  • 左方向に画像が無限にループする



HTML5 Outliner【 Chrome 】







マーキーと背景の確認


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>無限背景</title>
<link rel="stylesheet" href="css/style101.css" media="only screen and (max-width:480px)">

<!-- HTML5のIE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,secton{ display: block;}
</style>

<style>
body {
background-image:url(img2/panorama.jpg);
background-repeat: repeat-x;
-webkit-animation:bk_move 360s linear 0 infinite;
}
@-webkit-keyframes'bk_move' {
from {
background-positon-x: left;
}
to {
background-position-x: 2753px;
}
}
#mq {
overflow:-webkit-marquee;
-webkit-transform:rotate(45deg);
width:50%;
white-space:nowrap;
position:absolute;
top:0.5em;
right:-2.5em;
}
#mq_bottom {
overflow:-webkit-marquee;
-webkit-transform:rotate(-45deg);
width:50%;
white-space:nowrap;
position:absolute;
top:0.5em;
left:-2.5em;
}
#qm {
overflow: -webkit-marquee;
white-space:nowrap;
width:100%;
}
</style>

</head>
<body>
<p id="mq">4月20日まで期間限定セール実施中！</p>

<p id="qm">4月20日まで期間限定セール実施中！2000円以上お買い上げのお客様に、もれなく粗品プレゼント！</p>
<p id="mq_bottom">4月20日まで期間限定セール実施中！</p>
</body>
</html>

ブラウザで表示【 Chrome 】



  • 配置位置と重なりの確認



HTML5 Outliner【 Chrome 】