html 怎么编写飞机移动,如何运用CSS3轻松实现H5页面里的飞行动画
原标题：如何运用CSS3轻松实现H5页面里的飞行动画
随着h5页面的宣传优势，越来越的企业做活动开始追求移动端的展示效果
像下图这样一个h5页面首屏，我们如果给元素添加了动画之后，看上去是不是活跃了许多
接下来我们就开始教大家如何用css3实现这样的h5动画页面效果
首先建立文件之后
给背景来一个青蓝色的天空
这里如图所示
直接给body设置一个背景颜色即可
再插入一张plane的飞机图片
这样，准备工作就完成了
接下来，飞机默认位置是顶着坐上角的
这样令人很不舒服
咱们可以给他一个postion的定位
放置到一个自己觉得舒服的地方
代码如图所示
好了，可以开始制作动画的代码了
css3提供了两种动画形式的代码
其中之一是animation
代码如图所示
fei——这个动画的名字
2s——这个动画的时长
infinite，linear 这个，这个自己去百度翻译就好了
自己动手，丰衣足食
刚才的animation只是告诉电脑
我们需要来一个叫做“fei”的动画
至于这个“fei”的动画
到底怎么个动法
并没有告诉电脑
接下来的代码
是书写animation动画的标准格式
如图所示
0%是指动画一开始是什么状态
100%那当然是指动画结束时候的状态
come on
假设我们想要飞机上下飞
那么需要输入transform这个代码来指定飞机要变了
冒号后面的意思是指
要移动Y轴移动变化
单位是30个像素
好了，做到这里
就可以预览到飞机可以飞了
等会，看起来是不是有点傻
从下往上飞，然后循环？
不对啊，我们希望看上去
应该是，上下上下这样循环啊！
是不是很多人想到了
只要加入中间那个50%的代码
小修改一下参数就可以了
好了，留给大家一些思考题
如果要让飞机斜着飞下来那应该怎么办呢
或者说，一边上下颠簸，一边往左边飞呢
还有，如果我希望有个地球的图片，在那自转又该怎么办呢
群主私聊索取学习视频
领取
责任编辑：
html 怎么编写飞机移动,如何运用CSS3轻松实现H5页面里的飞行动画相关推荐
- 纯CSS3卡通模型飞机飞行动画
下载地址 纯CSS3卡通模型飞机飞行动画是一款逼真的塞斯纳飞机天空飞行动画特效. dd:
- html炫酷边框样式,利用SVG和CSS3来实现一个炫酷的边框动画
这篇文章主要介绍了利用SVG和CSS3来实现一个炫酷的边框动画,不使用JavaScript使得编写过程轻松了不少,需要的朋友可以参考下 今天我们来探索一下Carl Philipe Brenner的网站 ...
- idea html ajax,在 IntelliJ IDEA 8.1中编写一个ajax jquery实例，取不到页面上的值
在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值0 brnm12942014.08.17浏览115次分享举报 public class AjaxServle ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
- js 3d地球飞机环绕飞行动画js特效
下载地址 js实现的3d地球飞机环绕飞行动画特效 dd:
- HTML5+CSS3小实例：手风琴式加载动画
HTML5+CSS3做一个手风琴式的加载动画,这动画.这质感.这配色,就问你喜不喜欢?!这个案例的知识点主要是:css的自定义属性 + 动画延迟 + 颜色滤镜(hue-rotate). 效果: 源码: ...
- 使用css3d-engine.js编写简单的 360全景h5页面
什么是这里所说的360全景h5页面?查看下面的案例进行了解: 开发项目:http://game.flyh5.cn/resources/game/wechat/zjh/fangtuo/index.htm ...
- 解决前端css3使用transition刷新页面取消过渡显示
解决前端css3使用transition刷新页面取消过渡显示 今天在使用transition时遇到一个问题,刷新页面后不会直接显示样式,而是会显示初始效果过渡到样式效果的动态效果, 查了很多资料,找到 ...
最新文章
- WINDOWS SERVER 2003从入门到精通之活动目录数据库的维护
- 为什么补码会比原码多一个数
- 工作流学习——Activiti整体认识二步曲
- 家里网线的接法和顺序
- CSU-1982 小M的移动硬盘
- 求一列数据中的波峰_用python进行数据分析的套路
- (计算机组成原理)第七章输入和输出系统-第二节2：外部设备之外存储器（磁盘的基本结构，磁盘阵列）
- html5图片列表纵向,div css图片列表实例布局案例ul li布局
- 案例学习BlazeDS+Spring之八InSync06“松耦合”UI同步事件通知
- Beyond Compare怎么查看合并文本后相同内容
- 第一部分 第二章 答案合集（part 1）1006-1023
- 统计信号处理基础——检测理论
- 推荐一个超级方便的Android 抓包工具 Chuck
- 数字图像处理实验03——图像几何变换
- Linux软件磁盘列阵RAID
- Win10切换到了Users用户怎么切换回来
- Dell R720服务器安装操作系统
- 本地前后端联调跳过cas sso单点登录
- 学习VGG（网络讲解+代码）
- 快排平均复杂度O(nlogn)证明