标签:
技术网站建设 |
平时我们做网站顶部的大banner的时候,总是放几幅图轮播,这种播放形式虽然是主流,但仍然不妨碍我们用其他的手段进行表现,今天我们采用分层法来做一个banner,来看看效果怎么样:
先上图:
如果截图看着没效果,欢迎移步到这个项目网站去看实际效果 陕西水务安装工程有限公司 www.sniiw.com
首先我们先制作所有需要的素材——背景城市、两个黄安全帽的人物、左侧的蓝色文字
其中城市背景和人物需要自己去找图,人物需要抠图保存成透明的png格式
第二步:我们通过css实现上图的样式,需要用到定位属性,css知识自己百度
第三步:上述工作做完,在网页内已经可以呈现上面最后一幅图的效果时,我们现在开始制作js特效
西安域名注册原创稿件
www.fnc.cn
特效很简单,步骤如下:
1、首先默认隐藏掉黄色安全帽的人物层和蓝色文字层;
2、页面加载完成后,启动定时器1秒钟后显示安全帽人物,在过1秒钟后显示蓝色文字层。效果即成
如果使用jqurey自带的动画效果,会让这个显示效果更柔和。