Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

html5+css3制作多屏简单动画

Posted on 2015年9月5日2015年9月5日 by king2088

首先动画是使用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代码






Touch




黑白电视

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

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2022年 7月
一 二 三 四 五 六 日
 123
45678910
11121314151617
18192021222324
25262728293031
« 10月    
© 2022 小小前端 | Powered by Superbs Personal Blog theme