banner
阿珏酱

阿珏酱

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

Draw iPhone phone with CSS3

Tips: When you see this prompt, it means that the current article has been migrated from the original emlog blog system. The publication time of the article is too long, and the formatting and content may not be complete. Please understand.

Drawing iPhone with CSS3

Date: 2017-7-3 Author: Ajuek Views: 1825 Comments: 1

Let's start with the effect picture for a quick look. (This is definitely not a picture. Hmm~ why does this sentence sound strange~)

Don't ask me which iPhone it is, because I don't know either. I haven't used it, you know.
image

CSS Styles#

#phone{
	width:250px;
	height:500px;
	background-color:#2E2E2E;
	border:10px solid #3B3B3B;
	margin:100px auto;
	border-radius:30px;/*Set the rounded border of the div element*/
}

#camera{
	width:8px;
	height:8px;
	background-color:#1A1A1A;
	border-radius:50%;
	border:2px solid #505050;
	margin:10px auto;/*10px margin from the top, centered horizontally*/
}

#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%; /*When width and height are the same, it becomes a circle*/
	margin:10px auto;
}

/*The :before selector inserts content before the selected element's content.*/
#btn:before{
	width:22px;
	height:22px;
	border:2px solid white;
	border-radius:30%;
	content:""; /*Even if the inserted content is empty, it still needs to be written, otherwise it won't be displayed*/
	display:inline-block;
	margin-top:7px;
	margin-left:7px;
}

HTML Part#

<div id="phone">
	<div id="camera"></div><!--Camera part-->
	<div id="receiver"></div><!--Receiver part-->
	<div id="screen"></div><!--Screen part-->
	<div id="btn"></div><!--Button part-->
</div>

Later, I added some interesting things to it.
Clicking the Home button can turn on the screen of the phone, and it will turn off again after 5 seconds.
Here is the effect picture of the screen on, of course, the middle one is a picture (my phone).

image

JavaScript Part#

Bind the onclick event to the div in the button part, and call the following function:

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

User Comments:

image Immortal Qianqiu 3 years ago (2018-05-19)
By the way, can't you use HTML code in emlog articles? You can make a preview. [#aru_53]

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.