高手进阶:纯CSS3制作逼真iPhone6模型

这是一款使用纯CSS3制作的逼真的iPhone6手机模型特效。该特效中通过简单HTML代码配合CSS3渐变等效果,制作出逼真的iPhone6手机模型效果。

zheng.jpg

点击上图或这里查看演示效果 点击这里下载插件

HTML结构

该iPhone6手机的HTML结构如下:

01 <div class="iphone">
02     <div class="iphone-top">
03       <span class="camera"></span>
04       <span class="sensor"></span>
05       <span class="speaker"></span>
06     </div>
07     <div class="top-bar"></div>
08     <div class="iphone-screen">
09       <img src="img/Awesome-iPhone-Wallpapers.jpg" alt="" />
10     </div>
11     <div class="buttons">
12       <span class="on-off"></span>
13       <span class="sleep"></span>
14       <span class="up"></span>
15       <span class="down"></span>
16     </div>
17     <div class="bottom-bar"></div>
18     <div class="iphone-bottom">
19       <span></span>
20     </div>
21   </div>
22 </div>

CSS样式

  在CSS样式中,首先为iphone6手机设置了固定的宽度和高度,背景色,阴影效果等基本属性。

01 .iphone {
02   box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.7);
03   border: 5px solid #d9dbdc;
04   background: #f8f8f8;
05   padding: 15px;
06   border-radius: 50px;
07   height: 877px;
08   width: 423px;
09   position: relative;
10   margin: 30px auto;
11   -webkit-transform: scale(0.8);
12           transform: scale(0.8);
13 }

  然后为手机的各个部件设置样式,下面是手机顶部的样式:分别为**,摄像头和感应器。

01 .iphone-top {
02   padding: 5px 110px 40px;
03   position: relative;
04 }
05 .iphone-top .speaker {
06   display: block;
07   width: 70px;
08   height: 6px;
09   margin: 0 auto;
10   border-radius: 6px;
11   background: #292728;
12 }
13 .iphone-top .camera {
14   display: block;
15   margin: 0 auto;
16   height: 10px;
17   width: 10px;
18   border-radius: 50%;
19   margin-bottom: 13px;
20   background: #333;
21 }
22 .iphone-top .sensor {
23   display: block;
24   width: 15px;
25   height: 15px;
26   float: left;
27   background: #333;
28   margin-top: -5px;
29   border-radius: 50%;
30 }