banner
阿珏酱

阿珏酱

いつもとは逆の電車に乗り、見たこともない風景を見に行く
twitter
github
facebook
bilibili
zhihu
steam_profiles
youtube

使用CSS3繪製iPhone手機

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

用 CSS3 繪製 iPhone 手機

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

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

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

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 秒後又再次熄滅屏幕
亮屏狀態的效果圖,當然中間那張是圖片了 (我手機)

image

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

網友評論:

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

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。