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

HTML5 授業



マーキー


  • 左右や上下にスクロールする文字や画像を表示する


ソースコード【 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/style100.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>
#mq {
overflow:
 -webkit-marquee;
 -webkit-transform:rotate(45deg);
width:50%;
white-spac: nowrap;
position: absolute;
top: 0.5em;
right: -2.5em;
}
</style>

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

ソースコード【 CSS 】

@charset "UTF-8";


/*マーキーアニメ用のp要素へのスタイル*/
#mq {
background-color:#903;
background-image:-webkit-gradient(linear, left top, right top, from(#903), to(#903),color-stop(0.4,#F00),color-stop(0.6,#F00));
color:#FFF;
border:inset #999 1px;
padding:3px 0;
}


ブラウザで表示【 Chrome 】



  • ウィンドウが５０％以下のとき style が適応される



HTML5 Outliner【 Chrome 】