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

个人作品 / 2013-12-29 / 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 条评论

发表评论取消回复

酷剑

2014-03-15

求怎么制作最终效果图片动画

@TA 回复
- 小影
  
  2014-03-15
  
  用的这个软件：http://c7sky.com/gifcam.html
  
  @TA 回复
  - 酷剑
    
    2014-03-17
    
    ok,我学习一下
    
    @TA 回复
酷剑

2014-03-14

哇，你的那个自动滚动是使用CSS3的还是用js的呢？

@TA 回复
- 小影
  
  2014-03-14
  
  JS和CSS都用到一点 🙂
  
  @TA 回复
深蓝

2014-03-05

給跪了！ 😥

@TA 回复
碎碎念

2014-02-11

不现实啊

@TA 回复
Vespa

2014-01-04

给大神送膝盖来了。。

@TA 回复
orangist

2014-01-03

😯 求拜师~

@TA 回复
S-kias

2014-01-01

这不科学！IE11居然在Chrome前！

@TA 回复
- 小影
  
  2014-01-01
  
  IE的硬件加速还是很给力的 😆
  
  @TA 回复
小蜜蜂

2013-12-31

你做出这个效果花了多久呀，好厉害好佩服啊

@TA 回复
- 小影
  
  2014-01-01
  
  零零碎碎3个晚上吧~
  
  @TA 回复
西门

2013-12-31

很漂亮的说！ 😯

@TA 回复
Inchyea

2013-12-30

略显犀利啊;

@TA 回复
麦田一根葱

2013-12-30

😀 牛逼

@TA 回复
一堵墙

2013-12-30

居然 IE11 大于 Chrome 32 我用 Chrome ~~~

@TA 回复