图片/图形
纯CSS3制作逼真的iphone 6手机模型
PetitQ
这是一款使用纯 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%;
}
其它部件的制作方法页基本类似，并没有使用复杂的代码。完整的样式文件请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
