html5之动态网页练习

github地址:https://github.com/CassielLee/html5Website.git

最近两天,利用html5、css、和JS做了一个简单的动态网页,网页一共分为5个页面,每一个页面都有不同的动画效果,此外还有开机动画及背景音乐。
第一屏:主要是图片的3D无缝轮播效果
第二屏:照片墙,右边每一个图标都可以反转,且背面有相应的文字;
第三屏:机器人动画
第四屏:图片特效,当鼠标移到图片上时,上层的图片会分裂成四块,并按逆时针方向旋转出画,露出下层的图;
第五屏:当鼠标移动到人物图标上时,相应的任务会出现起泡效果;
结果只能展示静态效果,动态效果没办法展示,不过有兴趣的同学可以去我的github下载代码,相关的素材和每一页的参数都在文件中。
本次练习的不足之处: 
1、没有使用预处理语言编写css,css太麻烦,结构不明了,我已经尽量写的整洁一点,注释也很详细,但是写到后面定位还是很麻烦,因此决定以后都是用less编写css; 
2、JS代码写在一个文件里面,不宜维护且混乱,以后一定要注意模块化;
 
               
         
               
  
效果展示:

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值