用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";
}



本博客所有文章如无特别注明均为原创。作者:阿珏复制或转载请以超链接形式注明转自 阿珏博客
原文地址《用CSS3绘制iPhone手机

相关推荐

发表评论

路人甲 OωO表情
Ctrl+Enter快速提交

网友评论(1)

话说emlog文章那不是可以搞html代码的么?可以做个预览
不朽千秋 11个月前 (2018-05-19) 回复