手机版百度首页推情人节特效，HTML5＋CSS3 实现网页3D翻转

     <div id="news_body">     <p><a href="/misc/goto?guid=4958329204690293229" rel="attachment wp-att-83028"><img style="width:351px;display:block;height:633px;margin-left:auto;margin-right:auto;" title="照片" alt="手机版百度首页推情人节特效，HTML5＋CSS3 实现网页3D翻转" src="https://simg.open-open.com/show/8b46027707779c84258a8dc995961293.jpg" /></a></p>     <p><a href="/misc/goto?guid=4958329205519554901" rel="attachment wp-att-83029"><img style="width:349px;display:block;height:704px;margin-left:auto;margin-right:auto;" title="照片(1)" alt="手机版百度首页推情人节特效，HTML5＋CSS3 实现网页3D翻转" src="https://simg.open-open.com/show/5bd8331c998b5f8a31783b9afbfc05c6.jpg" /></a></p>     <p>        今天是西方的传统节日情人节，这次百度走在了 Google 前面，率先在手机版百度首页推出了情人节特效。</p>     <p>        用现代一点的浏览器打开<a href="/misc/goto?guid=4958329206311119067" rel="external nofollow" target="_blank">手机版百度首页</a>会 看到百度的 LOGO 变成了一个一直闪动翅膀的小天使，点击天使后屏幕顶部会出现一幅幾米漫画，显示两个男女主人公向左右渐变消失。之后手机屏幕会以 3D 的形式向右翻转，紧接着出现一圈红色的心型玫瑰花，两个人也最终走到了一起。再点击返回首页，又是以 3D 的形式翻转回首页，现在 LOGO 又从小天使也变成了男女主人公在一起的情景。</p>     <p>        从设计上看，我觉得天使，心型玫瑰设计得还可以，但没有给人惊艳的感觉，像是不够细致。不过 3D 的翻转效果确是把我惊讶到了。</p>     <p>        我问百度的人这个效果的技术上是怎样的，他们告诉我说，“通过 HTML5 Canvas 绘图，用 CSS3 来控制动画，同时针对不同的操作平台、手机终端，将图形化元素、动画效果尽量融入其中，来缩减彩蛋的大小 ；并采取了离线存储的技术。”我记得百度这样的大公司一般不会贸然尝试使用新技术，以前为了尽量兼容更多的平台，他们还使用过 Flash 来做这种特效。这次他们相当于带了一个好头，给 HTML5 和 CSS3 就增加了一个案例。想必以后会有起来越多的公司开始尝试使用新技术吧。</p>     <p>        实际上这是第二次百度在手机浏览器上实现动态特效了，第一次是春节期间一个龙的特效，这次比上次强。来自: <a id="link_source2" href="/misc/goto?guid=4958329207110390263" target="_blank">www.36kr.com</a></p>    </div>