爱意两存

很多设计师在交付设计稿给客户预览时，都喜欢把自己的作品放在一些手机模型或电脑模型上演示，这样可以让客户看到最终的效果输出，所以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）