8个纯CSS编写的手机设备Mock Up模型

很多设计师在交付设计稿给客户预览时，都喜欢把自己的作品放在一些手机模型或电脑模型上演示，这样可以让客户看到最终的效果输出，所以MOCK UP我们应该收藏一些，在今天的文章中，我们分享8个纯CSS编写的手机设备Mock Up模型，手机品牌有很多哦，如：iPhone5S/5C、诺基亚的Lumia 920、HTC、三星等等，下面一起看看介绍。

其实大家也可以用这个来学习CSS，看看人家是怎么写的，然后自己做个练习出来，并不是很难的哦！相关推荐：前往《 30个苹果系列产品模型》的分享，里面都是PSD或AI格式的素材，也是不错的选择！

这组手机Mockup由Marvelapp分享，通过CSS样式编写如此漂亮的扁平化手机设备，确实很赞。

设备模型和颜色

• iPhone 5S（颜色：黑·白·金）
• iPhone 5C（颜色：白·红·黄·绿·蓝）
• iPad mini（颜色：黑色·白色）
• iPhone 4S（颜色：黑色·白色）
• Nexus 5
• Lumia 920（颜色：黑·白·黄·红·蓝）
• 三星 S5（颜色：白色·黑色）
• HTC one

垂直&水平切换

此外，我们可以点击 LANDSCAPE链接来切换模板的水平和垂直展示，点击其它描点为切换颜色。

图：垂直视图

图：水平视图，点landscape切换

使用方法

#iphone5s.landscape.gold
        .device
                .inner
                .sleep
                .volume
                .camera
                .top-bar
                .sensor
                .speaker
                .screen
                        显示屏文字
                .bottom-bar
                .home

就介绍这么多，大家可以点击下面的连接去看看Demo和下载它。

在线DEMO | 下载模板文件（github）

Copyright ©2010-2014 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
交流：UI设计交流群：59300679，与500名设计师交流设计，分享素材。