h5模仿iphone4经典滑动解锁效果
代码语言：html
所属分类：布局界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>iPhone4 on pure CSS3!</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="TjRus">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="iPhone4 on pure CSS3!" />
<meta itemprop="name" content="iPhone4 on pure CSS!!!">
<meta itemprop="description" content="This would be a description of the content your users are sharing">
<style>
/*!
* iPhone4 on CSS3
* tjrus.com/iphone
*
* Copyright (c) 2011 Vasil Zubach
*
* Author Vasil Zubach
*/
.iphone {
margin: 0;
display: block;
position: relative;
background: #e8e7e6;
width: 368px;
height: 734px;
border-radius: 58px;
-moz-border-radius: 58px;
-webkit-border-radius: 58px;
border: 1px solid #868381;
box-shadow: #c1bfbf 0 0 0 1px;
-moz-box-shadow: #c1bfbf 0 0 0 1px;
-webkit-box-shadow: #c1bfbf 0 0 0 1px;
padding: 2px;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;
}
.iphone:after {
content: '';
width: 4px;
height: 3px;
position: absolute;
top: -1px; left: 120px;
background: rgba(0,0,0,0.7);
box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
-moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
}
.iphone:before {
content: '';
width: 373px;
height: 3px;
position: absolute;
top: 646px; left:0px;
background: rgba(0,0,0,0.7);
box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
-moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0;
z-index: 0;
}
.iphone * {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
/* ---------------------------------------------------------------------------- */
.iphone_power_button {
height: 4px;
position: absolute;
width: 60px;
background: #000;
top: -5px;
left: 250px;
cursor: pointer;
background: #ccc;
background: linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
background: -moz-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
background: -webkit-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
background: -o-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0;
-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0;
-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0;
}
/* ---------------------------------------------------------------------------- */
.iphone_voice_toogle {
background: linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
background: -webkit-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
background: -moz-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
background: -o-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% );
position: absolute;
width: 4px;
height: 34px;
top: 66px;
left: -5px;
border-radius: 1px 0 0 1px;
-moz-border-radius: 1px 0 0 1px;
-webkit-border-radius: 1px 0 0 1px;
box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
}
/* ---------------------------------------------------------------------------- */
.iphone_voice_plus {
background: linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -webkit-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -moz-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -o-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
position: absolute;
width: 4px;
height: 26px;
top: 144px;
left: -5px;
border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
}
/* ---------------------------------------------------------------------------- */
.iphone_voice_minus {
background: linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -webkit-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -moz-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
background: -o-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%);
position: absolute;
width: 4px;
height: 26px;
top: 210px;
left: -5px;
border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
-moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
-webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0;
}
/* ---------------------------------------------------------------------------- */
.iphone_black_bg {
width: 100%;
height: 100%;
background: #000;
border-radius: 56px;
-moz-border-radius: 56px;
-webkit-border-radius: 56px;
box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px;
-moz-box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px;
-webkit-box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px;
z-index: 1;
position: relative;
}
.iphone_black_bg:after {
content: '';
position: absolute;
width: 320px;
height: 480px;
left: 19px;
top: 121px;
border: 5px solid rgba(14,14,14,0.5);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
overflow: hidden;
z-index: 2;
display: block;
}
/* ---------------------------------------------------------------------------- */
.iphone_camera {
position: absolute;
width: 17px;
height: 17px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
left: 113px;
top: 56px;
background: radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,1), rgba(44,43,45,1) 300%);
background: -webkit-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,1), rgba(44,43,45,1) 300%);
background: -moz-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,1), rgba(44,43,45,1) 300%);
background: -o-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,1), rgba(44,43,45,1) 300%);
box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.1) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px;
-moz-box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.1) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px;
-webkit-box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.1) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px;
overflow: hidden;
z-index: 1000;
}
.iphone_camera:after {
content: '';
position: absolute;
display: block;
width: 7px;
height: 7px;
top: 5px;
left: 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: radial-gradient(35% 35%, ellipse closest-side, #051d31, #2b5d90 300%);
background: -webkit-radial-gradient(35% 35%, ellipse closest-side, #051d31, #2b5d90 300%);
background: -moz-radial-gradient(35% 35%, ellipse closest-side, #051d31, #2b5d90 300%);
background: -o-radial-gradient(35% 35%, ellipse closest-side, #051d31, #2b5d90 300%);
box-shadow:rgba(0,0,0,0.01) 0 0 0 3px;
-moz-box-shadow:rgba(0,0,0,0.01) 0 0 0 3px;
-webkit-box-shadow:rgba(0,0,0,0.01) 0 0 0 3px;
}
.iphone_camera:before {
content: '';
position: absolute;
display: block;
width: 2px;
height: 2px;
top: 7px;
left: 9px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: 100;
background: #2b5d90;
box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px;
-moz-box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px;
-webkit-box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px;
}
/* ---------------------------------------------------------------------------- */
.iphone_dynamic {
position: absolute;
width: 60px;
height: 10px;
padding: 6px 6px 0 6px;
overflow: hidden;
left: 148px;
top: 57px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
background: linear-gradient(top, #141415, #414141);
background: -webkit-linear-gradient(top, #141415, #414141);
background: -moz-linear-gradient(top, #141415, #414141);
background: -o-linear-gradient(top, #141415, #414141);
box-shadow: rgba(255,255,255,0.3) 0 1px 0, #000 0 -1px 0;
-moz-box-shadow: rgba(255,255,255,0.3) 0 1px 0, #000 0 -1px 0;
-webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0, #000 0 -1px 0;
z-index: 10;
}
.iphone_dynamic:after {
content: '';
position: absolute;
z-index: 1;
width: 60px;
height: 7px;
top: 5px;
left: 6px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: linear-gradient(top, rgba(65,65,65,1), rgba(255,255,255,0.3));
background: -webkit-linear-gradient(top, rgba(65,65,65,1), rgba(255,255,255,0.3));
background: -moz-linear-gradient(top, rgba(65,65,65,1), rgba(255,255,255,0.3));
background: -o-linear-gradient(top, rgba(65,65,65,1), rgba(255,255,255,0.3));
box-shadow: rgba(255,255,255,0.4) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px;
}
.iphone_dynamic:before {
content: '';
position: absolute;
z-index: 100;
width: 10px;
height: 10px;
top: 8px;
left: 0px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%);
background: -webkit-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%);
background: -moz-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%);
background: -o-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%);
opacity:0.8;
}
.iphone_dynamic span {
background: rgba(0,0,0,0.2);
width: 1px;
height: 1px;
display: block;
float: left;
z-index: 3;
position: relative;
margin: 1px 1px 0 0 ;
}
.iphone_dynamic span:nth-child(3n+1) { box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; -webkit-box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; }
.iphone_dynamic span:nth-child(4n+1) { box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -webkit-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; }
.iphone_dynamic span:nth-child(7n+1) { box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -webkit-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; }
/* ---------------------------------------------------------------------------- */
.iphone_light_gradient {
position: absolute;
width: 360px;
height: 729px;
top: 5px;
right: 5px;
border-radius: 53px;
-moz-border-radius: 53px;
-webkit-border-radius: 53px;
background: linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
background: -moz-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
overflow: hidden;
z-index: 2;
}
/* ---------------------------------------------------------------------------- */
.iphone_home {
position: absolute;
width: 70px;
height: 70px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
top: 637px;
left: 151px;
box-shadow: #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
-moz-box-shadow: #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
-webkit-box-shadow: #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
overflow: hidden;
z-index: 105;
cursor: pointer;
}
.iphone_home:after {
content: '';
position: absolute;
width: 21px;
height: 21px;
border: 2px solid #a3a4a3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset #585758 0 0 1px, #585758 0 0 1px;
-moz-box-shadow: inset #585758 0 0 1px, #585758 0 0 1px;
-webkit-box-shadow: inset #585758 0 0 1px, #585758 0 0 1px;
left: 23px;
top: 23px;
z-index: 3;
}
.iphone_home:active {
box-shadow: inset rgba(0,0,0,1) 0 0 0 1px, #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
-moz-box-shadow: inset rgba(0,0,0,1) 0 0 0 1px, #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
-webkit-box-shadow: inset rgba(0,0,0,1) 0 0 0 1px, #212020 0 0 0 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px;
}
.iphone_home:active:after {
top: 22px;
}
/* ---------------------------------------------------------------------------- */
.iphone_display {
position: absolute;
width: 320px;
height: 480px;
left: 26px;
top: 128px;
background: red;
z-index: 1002;
overflow: hidden;
background: linear-gradient(top, #666, #333);
background: -webkit-linear-gradient(top, #666, #333);
background: -moz-linear-gradient(top, #666, #333);
background: -o-linear-gradient(top, #666, #333);
}
.iphone_display.off {
background: #000;
}
.iphone_display::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%);
z-index: 1;
}
/* ---------------------------------------------------------------------------- */
.iphone_headline {
position: absolute;
top: 0;
top: -20px;
left: 0;
background: rgba(0,0,0,0.6);
width: 100%;
height: 19px;
border-bottom: 1px rgba(0,0,0,0.3) solid;
overflow: hidden;
z-index: 3;
}
.iphone_net {
position: absolute;
top:4px;
left: 4px;
width: 19px;
height: 10px;
overflow: hidden;
}
.iphone_net::after {
content: '';
position: absolute;
right: 0;
top:0;
display: block;
width: 3px;
height: 10px;
background: #c6c6c6;
box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0;
-moz-box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0;
-webkit-box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0;
}
.iphone_net_title {
font: bold 13px/19px "Helvetica Neue";
color: #c6c6c6;
text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
text-transform: uppercase;
position: absolute;
left: 26px;
top:0;
}
.iphone_wi-fi {
top: -14px;
left: 70px;
width: 25px;
height: 25px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
overflow: hidden;
position: absolute;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
}
.iphone_wi-fi:after {
content: '';
top: 12px;
left: 12px;
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px #c6c6c6 solid;
}
.iphone_wi-fi:before {
content: '';
top: 17px;
left: 17px;
width: 10px;
height: 10px;
overflow: hidden;
position: absolute;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px #c6c6c6 solid;
}
.iphone_wi-fi .hack {
position: absolute;
left: 22px;
top: 22px;
width: 4px;
height: 4px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #c6c6c6;
z-index: 6;
}
.iphone_clock {
font: bold 13px/19px "Helvetica Neue";
color: #c6c6c6;
text-shadow: rgba(0,0,0,0.3) 0 1px 1px;
text-transform: uppercase;
position: absolute;
left:0;
top:0;
display: none;
width: 100%;
text-align: center;
}
.iphone_lock {
width: 10px;
height: 7px;
position: absolute;
background: #c6c6c6;
top: 8px;
left: 156px;
}
.iphone_lock:after {
content: '';
position: absolute;
top: -5px;
left: 2px;
width: 4px;
height: 5px;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border: 1px solid #c6c6c6;
box-shadow: rgba(198,198,198,0.6) 0 0 0 1px;
-moz-box-shadow: rgba(198,198,198,0.6) 0 0 0 1px;
-webkit-box-shadow: rgba(198,198,198,0.6) 0 0 0 1px;
}
.iphone_battery {
position: absolute;
height: 8px;
width: 18px;
border: 1px solid #c6c6c6;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
right: 6px;
top: 4px;
}
.iphone_battery:after {
content: '';
position: absolute;
height: 2px;
width: 1px;
border: 1px solid #c6c6c6;
right: -3px;
top: 2px;
}
.iphone_battery:before {
content: '';
position: absolute;
height: 6px;
width: 16px;
background: #c6c6c6;
left: 1px;
top: 1px;
}
/* ---------------------------------------------------------------------------- */
.iphone_header {
position: absolute;
width: 100%;
background: linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
background: -webkit-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
background: -moz-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
background: -o-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
left: 0;
top: 20px;
top: -113px;
height: 93px;
border-bottom: 1px rgba(255,255,255,0.2) solid;
box-shadow: rgba(0,0,0,0.4) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,0.4) 0 1px 0;
text-align: center;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 0 -1px 0;
z-index: 2;
}
.iphone_header .iphone_time {
font: 200 65px/69px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
width: 100%;
}
.iphone_header .iphone_time span {
position: relative;
top: -4px;
}
.iphone_header .iphone_date {
font: 200 17px/17px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
width: 100%;
position: relative;
top: -3px;
}
/* ---------------------------------------------------------------------------- */
.iphone_footer {
position: absolute;
width: 100%;
background: linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
background: -webkit-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
background: -moz-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
background: -o-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%);
left: 0;
bottom: 0;
bottom: -97px;
height: 95px;
border-top: 1px rgba(255,255,255,0.4) solid;
box-shadow: rgba(0,0,0,0.4) 0 -1px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 -1px 0;
-webkit-box-shadow: rgba(0,0,0,0.4) 0 -1px 0;
z-index: 2;
}
.iphone_unlock {
width: 279px;
height: 51px;
position: absolute;
left: 50%;
margin-left: -139px;
top: 20px;
background: linear-gradient(top, #020509, #232527);
background: -webkit-linear-gradient(top, #020509, #232527);
background: -moz-linear-gradient(top, #020509, #232527);
background: -o-linear-gradient(top, #020509, #232527);
border: 1px solid #333;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
}
.iphone_slider {
position: absolute;
width: 69px;
height: 45px;
left: 0;
top: 3px;
background: linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%);
background: -webkit-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%);
background: -moz-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%);
background: -o-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: rgba(0,0,0,0.9) 0 1px 1px;
-moz-box-shadow: rgba(0,0,0,0.9) 0 1px 1px;
-webkit-box-shadow: rgba(0,0,0,0.9) 0 1px 1px;
z-index: 10;
margin: 0 3px;
cursor: pointer;
}
.iphone_slider:after{
content: '';
background: #8c8c8c;
width: 18px;
height: 12px;
left: 21px;
top: 17px;
position: absolute;
box-shadow: rgba(255,255,255,0.3) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.3) 0 1px 0;
-webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0;
}
.iphone_slider:before{
content: '';
position: absolute;
width: 0;
height: 0;
left: 34px;
top: 11px;
border-top: 12px solid transparent;
border-left: 24px solid #8c8c8c;
border-bottom: 12px solid transparent;
transform: scaleX(0.6);
-webkit-transform: scaleX(0.6);
-moz-transform: scaleX(0.6);
-o-transform: scaleX(0.6);
z-index: 1;
}
.iphone_slide2unlock {
position: absolute;
left: 93px;
font: 200 26px/51px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
transform: scaleX(0.99);
-webkit-transform: scaleX(0.99);
-moz-transform: scaleX(0.99);
-o-transform: scaleX(0.99);
top: 0;
color: #fff;
z-index: 4;
}
/* ---------------------------------------------------------------------------- */
.iphone_dock {
border-bottom: 42px solid rgba(255,255,255,0.15);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
width: 300px;
position: absolute;
left: 0;
bottom: 4px;
bottom: -80px;
z-index: 5;
}
.iphone_dock:after {
content: '';
position: absolute;
top: 42px;
left: -10px;
display: block;
width: 320px;
height: 4px;
background: linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
background: -moz-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
box-shadow: inset rgba(255,255,255,0.09) 0 1px 0;
-moz-box-shadow: inset rgba(255,255,255,0.09) 0 1px 0;
-webkit-box-shadow: inset rgba(255,255,255,0.09) 0 1px 0;
}
.iphone_dock:before {
content: '';
position: absolute;
top: 0px;
left: -100px;
display: block;
width: 320px;
border-radius: 0 0 300px/40px 0;
-moz-border-radius: 0 0 300px/40px 0;
-webkit-border-radius: 0 0 300px/40px 0;
height: 30px;
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%);
z-index: -1;
}
/* ---------------------------------------------------------------------------- */
.iphone_icons_containter {
top: 34px;
width: 320px;
position: relative;
display: block;
position: absolute;
left: 0;
}
.icon {
width: 56px;
height: 56px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
float: left;
margin-bottom: 30px;
z-index: 10;
position: absolute;
}
.icon span {
display: block;
text-align: center;
font: bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 1px 2px 1px;
text-transform: capitalize;
position: absolute;
top: 58px;
left: -10px;
width: 76px;
}
.icon:nth-child(4n + 1) { left:17px; }
.icon:nth-child(4n + 2) { left:92px; }
.icon:nth-child(4n + 3) { left:168px; }
.icon:nth-child(4n + 4) { left:243px; }
.icon:nth-child(-n + 16) { top: 258px; }
.icon:nth-child(-n + 12) { top: 172px; }
.icon:nth-child(-n + 8) { top: 86px; }
.icon:nth-child(-n + 4) { top: 0; }
.iphone_dock .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0