用 CSS3 还原魅族智能手机的外观变化过程

[MEIZU Smartphones in Pure CSS3]纯 CSS3 实现魅族智能手机历代产品的演变~

前几天在 codepen 上看到一个 Apple Mice,作者使用 CSS3 制作了苹果的历代鼠标。话说我之前也使用HTML5和CSS3制作过一台魅族M9,不知还有人记得不~

最终效果

制作过程

第一步:收集外观图片

第一步:收集外观图片

第二步:使用 Fireworks 重绘,以便获得各部分的大小和颜色参数

第二步重绘外观

第三步:最后就是在网页里重现了,体力活略过...

可以让我不用考虑浏览器前缀的问题~

围观地址

MEIZU Smartphones in Pure CSS3

PS: 浏览器显示效果排名如下:Internet Explorer 11 > Chrome 32 > Firfox 26

17 条评论

发表评论

*