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.
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).
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:
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]