使用CSS3繪製iPhone手機

提示：當你看到這個提示的時候，說明當前的文章是由原emlog博客系統搬遷至此的，文章發布時間已過於久遠，編排和內容不一定完整，還請諒解`

用 CSS3 繪製 iPhone 手機

日期：2017-7-3 阿珏 css 浏覽：1825 次評論：1 條

先上效果圖，先睹為快。(這絕對不是一張圖片。恩～這話怎麼怪怪的～)

不要問我 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";
}

網友評論：

不朽千秋 3 年前 (2018-05-19)
話說 emlog 文章那不是可以搞 html 代碼的麼？可以做個預覽 [#aru_53]