安踏双十一活动页
- HTML5 + CSS3 + Javascript
- CSS3 animation 做基本动画
- MTween库工具库 做动画
- 进来之前保证所有图片都加载完了,不然会造成图片未加载完整的一些显示情况,体验差
- 尽量不要写全局数据 避免污染
| 文件 | 作用 | 具体描述 |
|---|---|---|
| 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组图片 |
- 第一步：要先做一个图片预加载,提高用户体验,保证所有图片加载完成
- img上有一个事件onload,表示图片已经加载完了，可以渲染到浏览器了
- Js提供的三角函数方法,比如Math.sin(),cos(),tan()等,接受参数是弧度
- 弧度 = 角度*Math.PI/180
- 多边形计算
多边形的外角和 = 360；
单个外角 = 360 / n (n表示多边形的边)
多边形的内角 = 180 - 单个外角；
- backface-visibility: hidden;这个属性隐藏背面