首先动画是使用CSS3的animate实现的，因为animate使用方便，而且在手机端运行也很流畅。大家先看演示吧http://egtch.com/demo/css3app/，在手机端浏览效果也很好。
一、准备工作
1、jQurey最新版
2、jQurey插件fullpage.js
二、Animate动画
大家可以直接从http://daneden.github.io/animate.css/下载animate.css使用，可以根据自己的需求选择自己想要的效果来使用。
三、代码部分
1、html代码
黑白电视
18到19世纪，一直到20世纪，黑白电视一直存在于我们的生活中
彩色电视
用电的方法即时传送活动的视觉图像。同电影相似，电视利用人眼的视觉残留效应显现一帧帧渐变的静止图像，形成视觉上的活动图像。电视系统的发送端把景物的各个微细部分按亮度和色度转换为电信号后，顺序传送。在接收端按相应的几何位置显现各微细部分的亮度和色度来重现整幅原始图像。简单来说就是有颜色的电视。
科技的进步造就了今天电视的发展
2、CSS代码
body {
font-family: "微软雅黑", arial, helvetica;
}
h1 {
font-size: 3em;
color: #fff;
margin: 0;
padding: 0;
animation: bounceInDown 2s both;
-moz-animation: bounceInDown 2s both; /* Firefox */
-webkit-animation: bounceInDown 2s both; /* Safari and Chrome */
-o-animation: bounceInDown 2s both; /* Opera */
animation-play-state: paused;
}
.active h1, .active p, .active .image-tv {
animation-play-state: running;
}
p {
font-size: 1em;
text-align: left;
color: #999;
animation: flipInX 2s both;
-moz-animation: flipInX 2s both; /* Firefox */
-webkit-animation: flipInX 2s both; /* Safari and Chrome */
-o-animation: flipInX 2s both; /* Opera */
animation-play-state: paused;
}
.section {
text-align: center;
overflow: hidden;
}
.section .am {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
#myVideo {
position: absolute;
right: 0;
bottom: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black; /* in case the video doesn't fit the whole page*/
background-image: /* our video */;
background-position: center center;
background-size: contain;
object-fit: cover; /*cover video background */
z-index: 3;
}
#section0 .layer {
position: absolute;
z-index: 4;
width: 100%;
left: 0;
top: 43%;
}
#section0 {
overflow: hidden;
}
#infoMenu li a {
color: #fff;
}
.image-tv {
margin-top: 10px;
animation: bounceInUp 2s, flash 6s both infinite;
-moz-animation: bounceInUp 2s, flash 6s both infinite; /* Firefox */
-webkit-animation: bounceInUp 2s, flash 6s both infinite; /* Safari and Chrome */
-o-animation: bounceInUp 2s, flash 6s both infinite; /* Opera */
animation-play-state: paused;
}
四、APP下载
我已经使用cordova将其制作成了一个简单的APP了。大家可以下载来
http://egtch.com/demo/css3app/android-debug.apk