纯CSS3制作逼真的iphone 6手机模型

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

使用方法

HTML结构

该iphone6手机的HTML结构如下：

<div class="iphone">
    <div class="iphone-top">
      <span class="camera"></span>
      <span class="sensor"></span>
      <span class="speaker"></span>
    </div>
    <div class="top-bar"></div>
    <div class="iphone-screen">
      <img src="img/Awesome-iPhone-Wallpapers.jpg" alt="" />
    </div>
    <div class="buttons">
      <span class="on-off"></span>
      <span class="sleep"></span>
      <span class="up"></span>
      <span class="down"></span>
    </div>
    <div class="bottom-bar"></div>
    <div class="iphone-bottom">
      <span></span>
    </div>
  </div>
</div>
                

CSS样式

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

.iphone {
  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);
  border: 5px solid #d9dbdc;
  background: #f8f8f8;
  padding: 15px;
  border-radius: 50px;
  height: 877px;
  width: 423px;
  position: relative;
  margin: 30px auto;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}           
                

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

.iphone-top {
  padding: 5px 110px 40px;
  position: relative;
}
.iphone-top .speaker {
  display: block;
  width: 70px;
  height: 6px;
  margin: 0 auto;
  border-radius: 6px;
  background: #292728;
}
.iphone-top .camera {
  display: block;
  margin: 0 auto;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-bottom: 13px;
  background: #333;
}
.iphone-top .sensor {
  display: block;
  width: 15px;
  height: 15px;
  float: left;
  background: #333;
  margin-top: -5px;
  border-radius: 50%;
}                  
                

其它部件的制作方法页基本类似，并没有使用复杂的代码。完整的样式文件请参考下载文件。