使用CSS3山寨一款iPhone效果
admin 发布于：2016-12-11 22:01:29
阅读：loading
一款渣防iPhone效果的实现，看了一下实现这种效果的视频教程，学着去做了一款，示例中的效果为黑色的iPhone，这里给换成白色的，审美和专业方面经不起推敲，大致看上去像那么回事儿就可以了，使用CSS3实现的。
<!DOCTYPE html>
<html>
<head>
<title>山寨iPhone</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #1a1a1a;
}
#phone{
width:230px;
height:450px;
background-color: rgba(240,240,240 , 0.9);
margin: 50px auto;
border-radius: 15px;
box-shadow: 2px 2px 5px rgba(10,10,10,0.4) inset,2px 2px 5px rgba(10,10,10,0.4) inset,
-2px -2px 5px rgba(10,10,10,0.4) inset , -2px -2px 5px rgba(10,10,10,0.4) inset;
}
#border{
width:210px;
height:430px;
border-radius: 15px;
background-color: rgba(245,245,245 , 0.7);
left: 10px;
top: 10px;
position: relative;
}
#lock{
width: 35px;
height: 7px;
background: rgba(226,226,226,0.9);
position: absolute;
left: 155px;
top: -16px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 2px 2px 5px rgba(10,10,10,0.4) inset;
}
#receiver{
width: 6px;
height: 6px;
border-radius: 5px;
background: rgba(30,30,30 , 0.5);
box-shadow: 2px 2px 2px rgba(0,0,0,0.8) inset;
position: absolute;
top: 10px;
left: 48%;
}
#microphone{
width: 50px;
height: 6px;
border-radius: 5px;
background: rgba(30,30,30 , 0.6);
box-shadow: 2px 2px 2px rgba(0,0,0,0.8) inset;
position: absolute;
top: 25px;
left: 38%;
margin: 0px auto;
}
#microphone:AFTER {
content: '';
display: block;
width: 10px;height: 10px;
border-radius: 5px;
position: absolute;
top: -2px;left: -30px;
background: rgba(0,0,0 , 0.8);
box-shadow: 2px 2px 2px rgba(0,0,0,0.5) inset;
}
#voice{
width: 6px;
height: 60px;
background-color: rgba(226,226,226,0.9);
position: absolute;
left: -14px;
top: 60px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#screen{
width:210px;
height:320px;
background-color: rgba(50,50,50 , 0.8);
position: absolute;
top: 55px;
left: 0px;
}
#home{
width: 35px;height: 35px;
border-radius: 50%;
background: rgb(250,250,250);
border: 2px solid #c0c0c0;
box-shadow: 2px 2px 2px rgba(25,25,25,0.5) inset , 2px -2px 2px rgba(25,25,25,0.5) inset ,
-2px -2px 2px rgba(25,25,25,0.5) inset , -2px 2px 2px rgba(25,25,25,0.5) inset;
position: absolute;
bottom: 4px;
left: 42%;
}
</style>
</head>
<body>
<div id="phone">
<div id="border">
<!-- 锁定键 -->
<div id="lock"></div>
<!-- 听筒 -->
<div id="receiver"></div>
<!-- 话筒 -->
<div id="microphone"></div>
<!-- 声音 -->
<div id="voice"></div>
<!-- 屏幕 -->
<div id="screen"></div>
<!-- home键 -->
<div id="home"></div>
</div>
</div>
</body>
</html>
点赞
