用CSS3繪製iPhone手機

阿珏酱發表於2024-05-20
CSSS3iPhone

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

用CSS3繪製iPhone手機

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

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

不要問我iPhone幾 ，因為我也不知道，沒用過，你懂得。

用CSS3繪製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秒後又再次熄滅螢幕

亮屏狀態的效果圖，當然中間那張是圖片了(我手機)

用CSS3繪製iPhone手機
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手機 》

網友評論：

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

相關文章