腾讯TID：环球妙旅程活动分享.pdfVIP

腾讯T ID ：环球妙旅程活动分享 从下半年开始 ，我尝试在活动页面中添加css3动画 ，让标 浏览器的用户能够看到更加炫的效果。 一直小打小闹的试验着各种效果~前不久 ，鬼哥跟我说有个活动要大量使用css3动画 ，各种动 ！内 心一阵狂喜~~ 这是与南航公司合作的活动 ，用户通过选择航线(欧洲线或北美线) ，每个航线4个城市 ，完成航线后 转发微博即可参与抽奖。城市间通过css3动画转场切换 ，对于IE浏览器通过JS做切换。每个城市还 会使用css3让小元素动起来。 经过三周的努力 ，活动终于上线了 ，但是过程并非想象那么顺利。 环球妙旅程活动体验 ：ht t p://cxh.t enpay.co m/2013/hqmlc/ ，欢迎猛击~ 过程中遇到的问题下面跟大家分享一下 ： 分享内容 ： 1.活动HT ML剖析 2.动画实现 3.遇到的问题及解决方法 按需加载 图片裁剪 图片文字 自适应 f ixed定位问题 4 .经验总结 【活动HT ML剖析】 由于航程的8个城市需要随着地球转动进行切换 ，8个城市的内容需要对底部的地球相对定位 ，这样 控制地球转动就能实现城市转场。 【动画实现】 1.地球是由CSS3绘制出来的一个大圆 ，把各个城市的图片定位在大圆上面 ，滚动大圆达到切换城市 转场的效果。 转场的效果。 view so urceprint ? 01 /*大球的定位设置*/ 02 .ball{ 03position:fixed;z-index:19; 04 left:50%;top:81%; argin-left:-1113px; 05width:2226px;height:2226px;border-radius:2226px; 06 } 07 08 /*动画关键帧*/ 09 @-webkit-keyfra es ball{ 10 0%{opacity:0.8;-webkit-transfor :rotate (0deg);} 11 50%{opacity:0;-webkit-transfor :rotate (-45deg);} 12 100%{-webkit-transfor :rotate (-90deg);opacity:1;} 13 } 2.城市内的元素漂浮 都是使用的以下这个动画 ，对元素位移的变化以及旋转。只是播放时间的长短不同~这样可以简化 代码的同时又能实现需要的效果。 view so urceprint ? 1 @-webkit-keyfra es swing{ 2 20%, 40%, 60%, 80%, 100% { -webkit-transfor -origin:botto center; } 3 20% { -webkit-transfor :translate (3px,0) rotate (25deg); } 4 40% { -webkit-transfor :translate (5px,2px) rotate (-20deg); } 5 60% { -webkit-transfor :translate (-1px,-11px) rotate (15deg); } 6 80% { -webkit-transfor :translate (-11px,-1px) rotate (-15deg); } 7 100% { -webkit-transfor :translate (0,0) rotate (0deg); } 8 } 【遇到问题以及解决】 1.按需加载 【过程尝试】 最初前端同学以为是使用主站那种img标签不进入屏幕的图片就不进行加载。 沟通后 ，前端同学提出把图片加在HT ML ，由ID控制载入 ，如下图结构 ： 但是很快认识到 ，图片最先已经在样式中加载了 ，JS无法控制。前端同学提出样式按需加载。 需要重构把大样式分离成以下部分 ，由JS动态加载。 但是JS只能用Link的形式把样式插入页面 ，不方便重构更新样式时间戳。 【目前方案】 经沟通 ，Wynn提出了更好的方法 ： 把样式名写在节点的自定义属性 ，需要加载时使用JS给节点的class属性赋上自定义熟悉的值 ，此时 ，客户端才会请求相应的图片。 这个方案的优点 ： 1.保持样式完整 ，方便更改时间戳以及后期维护。 2.请求缩减为一个 ，比之前分成7个样式相应需要发送7个请求节省了发送时间和等待时 间 （1ms+4 ms ）*(7- 1)=30ms ，而实际上 ，拆分后的样式字节数请求会比整个样