1. 利用CSS3的@keyframes规则创建动画效果；
2. 使用CSS3的animation效果完成滚动切换。
1 @-webkit-keyframes scrollText2 {
2 0%{
3 -webkit-transform: translateX(0px)
4 }
5 20%{
6 -webkit-transform: translateX(-204px)
7 }
8 40%{
9 -webkit-transform: translateX(-408px)
10 }
11 60%{
12 -webkit-transform: translateX(-612px)
13 }
14 80%{
15 -webkit-transform: translateX(-816px)
16 }
17 100%{
18 -webkit-transform: translateX(-1020px)
19 }
20 }
21 @keyframes scrollText2 {
22 0%{
23 transform: translateX(0px)
24 }
25 20%{
26 transform: translateX(-204px)
27 }
28 40%{
29 transform: translateX(-408px)
30 }
31 60%{
32 transform: translateX(-612px)
33 }
34 80%{
35 transform: translateX(-816px)
36 }
37 100%{
38 transform: translateX(-1020px)
39 }
40 }
41
42 .box4{
43 position: absolute
44 top: 100px
45 left: 100px
46 width: 200px
47 height: 30px
48 overflow: hidden
49 }
50 .border4{
51 position: absolute
52 top: 0px
53 left: 0px
54 width: 1400px
55 -webkit-animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0)
56 animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0)
57 }
58 .border4 div{
59 height: 30px
60 width: 200px
61 overflow: hidden
62 display: inline-block
63 }
64 .border4:hover{
65 animation-play-state:paused
66 -webkit-animation-play-state:paused
67 }
CSS代码说明：
@-webkit-keyframes及@keyframes定义了从0% ~ 100%之间，每过20%的时间，向左移动204px，总共有6次移动；
.box4 定义外容器的基本属性
.border4 定义了内容器的属性，-webkit-animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 和 animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 定义了用12s种循环一次，无限循环的效果；
.border4 div 定义了纵向滚动内容的基本样式；
.border4:hover 定义了鼠标移入容器时的效果，animation-play-state:paused 及 -webkit-animation-play-state:paused 定义了动画暂停；
1 <div class="box4">
2 <div class="border4">
3 <div>This is a test 1.</div>
4 <div>This is a test 2.</div>
5 <div>This is a test 3.</div>
6 <div>This is a test 4.</div>
7 <div>This is a test 5.</div>
8 <div>This is a test 1.</div>
9 </div>
10 </div>
HTML代码说明：
定义了6条信息可以横向滚动，其中前5条是真正横向滚动的信息，第6条和第1条信息是一样的，原因和上一篇纵向滚动一样，因为使用了@keyframes方式来实现动画效果，第1条信息的效果是默认为停止的，所以用第6条信息制作一个替代方法，在第一次循环结束后，可以无缝继续滚动。
通过使用HTML5的 Screen Orientation API, 可以在JavaScript定义屏幕方向。
所以用JS实现：
<video width="658" height="444" src="av.mp4" autoplay="autoplay"></video>
在页面加载完成后 获取浏览器高度以及宽度，再设置VIDEO元素高度宽度即可。
<script type="text/javascript">
function resizeBody() {
var bodyHeight = document.documentElement.clientHeight
$("#Flash1").height(bodyHeight + "px")
$("body").height(bodyHeight + "px")
}
$(function () {
resizeBody()
})
</script>
<body style=" width:100% height:100%" onresize="resizeBody()">
附上HTML5中如何判断横屏竖屏：
1.首先在head中加入如下代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
针对上述viewport标签有如下说明：
1)content中的width指的是虚拟窗口的宽度。
2)user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。
3)initial-scale=1.0 初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。
4)手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。
5)如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。
2.判断横屏竖屏：
1》CSS判断横屏竖屏：
写在同一个CSS中：
@media screen and (orientation: portrait) {/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
分开写在2个CSS中：
竖屏
<link rel="stylesheet" media="all and (orientation:portrait)"href="portrait.css">
横屏
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">
2》JS判断横屏竖屏：
//判断手机横竖屏状态：window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0)
{ alert('竖屏状态！') }
if (window.orientation === 90 || window.orientation === -90 )
{ alert('横屏状态！') } }, false)//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
<!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->
设置横屏应用得在config里面设置，网页是无法做到的
