欢迎光临
Html5圈

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

  简要教程

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

 

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

查看演示       下载插件

 

  使用方法

  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%;
}                  

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

 

  来源:jQuery之家

未经允许不得转载:Html5圈 » 纯CSS3制作逼真的iphone 6手机模型

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

HTML5网站定制 更优秀 更专业

联系我们全国服务热线