担路新闻资讯中心
你可以了解最新的互联网资讯,了解最新的互联网产品

如何运用CSS3轻松实现H5页面里的飞行动画

2018-09-06

        随着h5页面的宣传优势,越来越的企业做活动开始追求移动端的展示效果,接下来我们就开始教大家如何用css3实现这样的h5动画页面效果。

        首先建立文件之后,给背景来一个青蓝色的天空,直接给body设置一个背景颜色即可,再插入一张plane的飞机图片,这样,准备工作就完成了;

       接下来,飞机默认位置是顶着坐上角的,这样令人很不舒服,咱们可以给他一个postion的定位,放置到一个自己觉得舒服的地方,好了,可以开始制作动画的代码了,css3提供了两种动画形式的代码,其中之一是animation,fei——这个动画的名字,2s——这个动画的时长,接下来的代码,是书写animation动画的标准格式,0%是指动画一开始是什么状态,100%那当然是指动画结束时候的状态。

假设我们想要飞机上下飞,那么需要输入transform这个代码来指定飞机要变了,冒号后面的意思是指要移动Y轴移动变化,单位是30个像素,好了,做到这里,就可以预览到飞机可以飞了,等会,看起来是不是有点傻,从下往上飞,然后循环?,不对啊,我们希望看上去,应该是,上下上下这样循环啊!是不是很多人想到了,只要加入中间那个50%的代码,小修改一下参数就可以了。

在线提交合作申请
客服人员会在24小时内联系您
您也可以免费注册云账号并登录

公司地址: 上海松江九里亭九杜路349号417/418/419

高新技术企业编号:GR201631001183

ISO9001证书编号:ZZW16Q1111ROS