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

个人作品 / / 17 条评论

［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 条评论

发表评论