HTML5+CSS3+JS学习笔记-9-制作iphone手机模型

本文链接：https://blog.csdn.net/xionghui2007/article/details/53868705

庆祝圣诞节，使用HTML5+CSS3+JS制作iphone手机模型，并添加圣诞祝福语，类似开机动画效果！

截图：

代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>iphone手机模型</title>
<script src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
//$(selector).html(content) 改变被选元素的（内部）HTML
$("#mess").html(function() {
return "merry christmas!圣诞快乐!";
});
$("#screen").css({
"background-color": "#CCCCCC",
"transition": "all 10s"
});
$("#mess").css({
"font-size": "40px",
"color": "red",
"transition": "all 5s"
});
});
});
</script>
<style type="text/css">
body {
background-color: #ccc;
}

#phone {
width: 250px;
height: 500px;
background-color: #2e2e2e;
margin: 60px auto;
border: solid 10px #3b3b3b;
border-radius: 50px;
box-shadow: 3px 5px 5px 1px rgba(0, 0, 0, 0.5);
position: relative;
}

#phone:before {
content: "";
display: block;
width: 50px;
height: 6px;
background-color: #2e2e2e;
position: absolute;
top: -15px;
left: 150px;
border-radius: 3px 3px 0px 0px;
}

#phone:after {
content: "";
display: block;
width: 6px;
height: 50px;
background-color: #2e2e2e;
position: absolute;
left: -15px;
top: 60px;
border-radius: 3px 0px 0px 3px;
}

#camera {
width: 6px;
height: 6px;
border: solid 3px #4a4a4a;
border-radius: 50%;
margin: 20px auto 0px;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
}

#headphone {
width: 60px;
height: 5px;
border: solid 4px #4a4a4a;
margin: 13px auto;
background-color: #1a1a1a;
border-radius: 10px;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
}

#screen {
width: 220px;
height: 360px;
margin: 15px auto 0px;
border: solid 4px #1a1a1a;
background-color: #0a0a0a;
font-size: 40px;
}

#mess {
width: 200px;
height: 200px;
position: relative;
left: 50%;
/*盒子左上角点距离左边框50%*/
top: 50%;
/*盒子左上角点距离上边框50%*/
transform: translate(-50%, -50%);
/*整个盒子向左移动50%，向上移动50%*/
color: #FFF;
font-size: 36px;
text-align: center;
}

#btn {
width: 40px;
height: 40px;
background-color: #1a1a1a;
margin: 8px auto 0px;
border-radius: 50%;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset;
overflow: hidden;
/*阻止边界的传导，主要是隐藏越界的内容显示*/
}

#btn:before {
content: "";
width: 20px;
height: 20px;
border: solid 2px #FFF;
border-radius: 4px;
margin: 9px auto 0px;
display: block;
}
</style>
</head>

<body>
<div id="phone">
<div id="camera"></div>
<div id="headphone"></div>
<div id="screen">
<div id="mess"><br>iphone 6S</div>
</div>
<div id="btn"></div>
</div>
</body>

</html>