用CSS3绘制iPhone手机 (゜-゜)つロ干杯~ - 逐梦二次元世界，这里是一个充满二次元风情的技术博客，也是二次元爱好者的温暖聚集地阿珏酱のBlog

用CSS3绘制iPhone手机

先上效果图，先睹为快。(这绝对不是一张图片。恩~这话怎么怪怪的~)

不要问我iPhone几，因为我也不知道，没用过，你懂得。

css样式部分

#phone{
	width:250px;
	height:500px;
	background-color:#2E2E2E;
	border:10px solid #3B3B3B;
	margin:100px auto;
	border-radius:30px;/*设置div元素的圆角边框*/
}

#camera{
	width:8px;
	height:8px;
	background-color:#1A1A1A;
	border-radius:50%;
	border:2px solid #505050;
	margin:10px auto;/*距离上边距10px 左右居中*/
}

#receiver{
	width:80px;
	height:8px;
	border:2px solid #505050;
	margin:10px auto;
	border-radius:10px;
	background-color:#1A1A1A;
}

#screen{
	width:225px;
	height:385px;
	background-color:#0A0A0A;
	border:3px solid #1C1C1C;
	margin:10px auto;
}

#btn{
	width:40px;
	height:40px;
	background:#1A1A1A;
	border-radius:50%; /*当宽高相同时，则为圆*/
	margin:10px auto;
}

/*:before 选择器在被选元素的内容前面插入内容。*/
#btn:before{
	width:22px;
	height:22px;
	border:2px solid white;
	border-radius:30%;
	content:""; /*即使插入的内容为空也需要写，否则不显示*/
	display:inline-block;
	margin-top:7px;
	margin-left:7px;
}

HTML部分

<div id="phone">
	<div id="camera"></div><!-- 摄像头部分-->
	<div id="receiver"></div><!--听筒部分-->
	<div id="screen"></div><!--屏幕部分-->
	<div id="btn"></div><!--按钮部分-->
</div>

晚些我又加了点玩意上去

点击Home键可以让手机亮屏，5秒后又再次熄灭屏幕

亮屏状态的效果图，当然中间那张是图片了(我手机)

JavaScript部分

在按钮部分的div处绑定onclick事件，调用下面的函数;

var btn_obj = document.getElementById("screen");
function btn(){
	btn_obj.style.background = "url(1.jpg)";
	btn_obj.style.backgroundSize = "225px 385px";
	setTimeout("black()",5000);
}

function black(){
	btn_obj.style.background = "none";
	btn_obj.style.backgroundColor = "#0A0A0A";
}