HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 CSS3教程 查看内容

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

2016-4-25 11:20| 发布者: admin| 查看: 4733| 评论: 0|来自: jQuery之家

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

  简要教程

  这是一款使用纯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%;
}                  

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

 

  来源:jQuery之家

更多
1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-3-29 02:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部