加载中…
正文 字体大小:

关于html5分层动画的实现方式

(2019-03-22 09:37:29)
标签:

技术

网站建设

平时我们做网站顶部的大banner的时候,总是放几幅图轮播,这种播放形式虽然是主流,但仍然不妨碍我们用其他的手段进行表现,今天我们采用分层法来做一个banner,来看看效果怎么样:

先上图:
关于html5分层动画的实现方式

关于html5分层动画的实现方式

关于html5分层动画的实现方式

关于html5分层动画的实现方式

如果截图看着没效果,欢迎移步到这个项目网站去看实际效果 陕西水务安装工程有限公司 www.sniiw.com

首先我们先制作所有需要的素材——背景城市、两个黄安全帽的人物、左侧的蓝色文字

其中城市背景和人物需要自己去找图,人物需要抠图保存成透明的png格式

第二步:我们通过css实现上图的样式,需要用到定位属性,css知识自己百度

第三步:上述工作做完,在网页内已经可以呈现上面最后一幅图的效果时,我们现在开始制作js特效

西安域名注册原创稿件 www.fnc.cn

特效很简单,步骤如下:

1、首先默认隐藏掉黄色安全帽的人物层和蓝色文字层;
2、页面加载完成后,启动定时器1秒钟后显示安全帽人物,在过1秒钟后显示蓝色文字层。效果即成

如果使用jqurey自带的动画效果,会让这个显示效果更柔和。



0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有