手机3维建模（CSS制作乐视1S手机模型）
手机3维建模（CSS制作乐视1S手机模型）<div class="Phone"><body>加油~如下图：HTML：
hi，大家好，我是拾光。
今天给大家带来的是：制作一个手机模型。
无聊的时候做的，不过挺久的时间了，今天差点忘记了发布，所以找找以前有趣的小例子给大家看看。
大家也可以试着发挥想象做一些其他的，或者使用canvas做一个手机模型。
加油~
如下图：
HTML：
<body>
<div class="Phone">
<div class="body"></div>
<div class="head"></div>
<div class="cinema"></div>
<div class="button"></div>
<div class="screen"></div>
<div class="proButton"></div>
<div class="broButton"></div>
</div>
<hr>
<div class="RotateButton">
</div>
</body>
CSS：
*{
list-style: none;
text-decoration: none;
font-family: '微软雅黑 UI';
font-size: 14px;
padding: 0px;
margin: 0px;
}
.Phone{
position: relative;
}
body{
padding:20px;
margin: 0px auto;
}
.body{
height: 400px;
width: 240px;
background-color: #daa520; ;
border-radius: 5%;
}
.screen{
background-color: #444;
position: absolute;
top: 30px;left: 0px;
width: 240px;
height: 340px;
}
.screen:before{
content: "Letv 1S";
position: absolute;
top: 160px;left: 100px;
color: #ffffff;
}
.cinema{
background-color: #444;
border-radius: 50%;
position: absolute;
top: 10px;left: 60px;
width: 10px;
height: 10px;
}
.cinema:before{
content: "";
background-color: #444;
border-radius: 50%;
position: absolute;
top: 0px;left: 115px;
width: 10px;
height: 10px;
}
.cinema:after{
content: "";
background-color: #444;
border-radius: 15px;
position: absolute;
top: 2px;left: 28px;
width: 70px;
height: 5px;
}
.button{
border-radius: 0px 10px 10px 0px;
width: 3px;
height: 50px;
position: absolute;
top: 40px;
left: 240px;
background-color: #daa520;
}
.button:after{
content: "";
border-radius: 0px 10px 10px 0px;
width: 3px;
height: 30px;
position: absolute;
top: 60px;
left: 0px;
background-color: #daa520;
}
.proButton{
width: 15px;
height: 15px;
border-radius: 50%;
border:2px solid #ffd700;
position: absolute;
top: 375px;left: 108px;
}
.proButton:before{
content: "";
width: 13px;
height: 13px;
border-radius: 20%;
border:2px solid #ffd700;
position: absolute;
top: -2px;left: -80px;
}
.proButton:after{
content: "";
border-style:solid;
border-width: 12px;
border-color: transparent #ffd700 transparent transparent;
width: 0px;
height:0px;
position: absolute;
top: -4px;left: 73px;
}
.broButton{
content: "";
border-style:solid;
border-width: 9px;
border-color: transparent #daa520 transparent transparent;
width: 0px;
height:0px;
position: absolute;
top: 376px;left: 188px;
}
三角形不美观，大家我都忘记我怎么会这样写的了，大家参照一下border的用法来写三角形。
虽然你们看到文章的时候可能不是23:52了，但是现在，我要对你们说晚安咯。
好梦。
Best wishes to you.
LiuDongYu.
此文章为程序猿原创，特此声明！
