jzxyouok/antah5.github.io

antaH5仿造安踏双十一活动页,H5

淘宝造物节

安踏双十一活动页

技术选型

1. HTML5 + CSS3 + Javascript
2. CSS3 animation 做基本动画
3. MTween库工具库 做动画

项目要求

1. 进来之前保证所有图片都加载完了,不然会造成图片未加载完整的一些显示情况,体验差
2. 尽量不要写全局数据 避免污染

项目目录结构

文件	作用	具体描述
index.html	主入口	H5单页面主页
css	主要样式文件	reset.css 重置动画样式,index.css页面样式,animation.css 动画样式
js	页面主要行为	data.js保存所有图片数据,/m.Tween.js工具库
load	爆炸小图片文件	2张logo图片/logo隐藏显示出来的文案图片
bg	保存主背景图片和云层	20张主背景图片/背景图/3张云层图
pano	保存主背景第二层图片	共8组图片

项目实现

1. 第一步：要先做一个图片预加载,提高用户体验,保证所有图片加载完成

项目知识点

1. img上有一个事件onload,表示图片已经加载完了，可以渲染到浏览器了
2. Js提供的三角函数方法,比如Math.sin(),cos(),tan()等,接受参数是弧度
3. 弧度 = 角度*Math.PI/180
4. 多边形计算

多边形的外角和 = 360；
单个外角 = 360 / n  (n表示多边形的边)
多边形的内角 = 180 - 单个外角；

5. backface-visibility: hidden;这个属性隐藏背面