css布局绘制ios图标效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局绘制ios图标效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
width : 100%;
height : 100%;
margin : 0;
padding : 0; }
.wrapper {
position : relative;
width : 420px;
margin : 0 auto;
padding : 0;
font-size : 0; }
.icon {
position : relative;
display : inline-block;
width : 100px;
height : 100px;
margin : 20px;
border-radius : 18px;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box; }
.phone {
background : -webkit-linear-gradient(top, #86fe65 0%, #06d315 100%);
background : -moz-linear-gradient(top, #86fe65 0%, #06d315 100%);
background : -ms-linear-gradient(top, #86fe65 0%, #06d315 100%);
background : -o-linear-gradient(top, #86fe65 0%, #06d315 100%);
background : linear-gradient(top, #86fe65 0%, #06d315 100%);
box-shadow : 0 0 0 1px rgba(134, 254, 101, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) inset; }
.phone .receiver {
position : absolute;
width : 80px;
height : 26px;
top : 50%;
left : 50%;
margin : -10px 0 0 -40px;
overflow : hidden;
-webkit-transform : rotateZ(225deg);
-moz-transform : rotateZ(225deg);
-ms-transform : rotateZ(225deg);
-o-transform : rotateZ(225deg);
transform : rotateZ(225deg); }
.phone .receiver .inner-part {
position : absolute;
width : 100%;
overflow : hidden; }
.phone .receiver .inner-part.part-1 {
height : 12px;
top : 0;
left : 0;
z-index : 2; }
.phone .receiver .inner-part.part-1:before {
position : absolute;
content : '';
width : 160px;
height : 160px;
top : 1px;
left : 50%;
margin : 0 0 0 -80px;
border-radius : 80px;
background : #fff;
box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1); }
.phone .receiver .inner-part.part-2 {
height : 24px;
top : 8px;
left : 0;
z-index : 1; }
.phone .receiver .inner-part.part-2:before, .phone .receiver .inner-part.part-2:after {
position : absolute;
content : '';
top : -1px;
width : 24px;
height : 16px;
border-radius : 6px;
background : #fff;
box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1); }
.phone .receiver .inner-part.part-2:before {
left : 0;
-webkit-transform : rotateZ(-10deg);
-moz-transform : rotateZ(-10deg);
-ms-transform : rotateZ(-10deg);
-o-transform : rotateZ(-10deg);
transform : rotateZ(-10deg); }
.phone .receiver .inner-part.part-2:after {
right : 0;
-webkit-transform : rotateZ(10deg);
-moz-transform : rotateZ(10deg);
-ms-transform : rotateZ(10deg);
-o-transform : rotateZ(10deg);
transform : rotateZ(10deg); }
.phone .receiver:before {
position : absolute;
content : '';
width : 36px;
height : 18px;
top : 10px;
left : 50%;
margin : 0 0 0 -18px;
z-index : 3;
border-radius : 8px 8px 0 0;
box-shadow : 0 1px 0 0 rgba(0, 0, 0, 0.1) inset;
background : -webkit-linear-gradient(-45deg, #63f056 0%, #3be13e 100%);
background : -moz-linear-gradient(-45deg, #63f056 0%, #3be13e 100%);
background : -ms-linear-gradient(-45deg, #63f056 0%, #3be13e 100%);
background : -o-linear-gradient(-45deg, #63f056 0%, #3be13e 100%);
background : linear-gradient(-45deg, #63f056 0%, #3be13e 100%); }
.reminders {
border : 1px #cfcfcf solid;
background : #fafafa;
overflow : hidden; }
.reminders .list-item {
position : absolute;
width : 66px;
height : 20px;
left : 32px;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box; }
.reminders .list-item:before {
position : absolute;
content : '';
width : 14px;
height : 14px;
top : 50%;
left : -24px;
margin : -7px 0 0 0;
border-radius : 8px; }
.reminders .list-item:after {
position : absolute;
content : '';
width : 10px;
height : 10px;
top : 50%;
left : -21px;
margin : -4px 0 0 0;
border-radius : 8px; }
.reminders .list-item.i1 {
top : 11px;
border-top : 2px #dbdbdb solid;
border-bottom : 1px #dbdbdb solid; }
.reminders .list-item.i1:before {
margin : -9px 0 0 0;
border : 1px #fa9700 solid; }
.reminders .list-item.i1:after {
margin : -6px 0 0 0;
background : #fa9700;
box-shadow : 0 0 0 2px rgba(250, 151, 0, 0.3); }
.reminders .list-item.i2 {
top : 29px;
border-bottom : 2px #dbdbdb solid; }
.reminders .list-item.i2:before {
border : 1px #28b3ed solid; }
.reminders .list-item.i2:after {
background : #28b3ed;
box-shadow : 0 0 0 2px rgba(40, 179, 237, 0.3); }
.reminders .list-item.i3 {
top : 47px;
border-bottom : 1px #dbdbdb solid; }
.reminders .list-item.i3:before {
margin : -8px 0 0 0;
border : 1px #69dc42 solid; }
.reminders .list-item.i3:after {
margin : -5px 0 0 0;
background : #69dc42;
box-shadow : 0 0 0 2px rgba(105, 220, 66, 0.3); }
.reminders .list-item.i4 {
top : 65px;
border-bottom : 2px #dbdbdb solid; }
.reminders .list-item.i4:before {
border : 1px #be62d9 solid; }
.reminders .list-item.i4:after {
background : #be62d9;
box-shadow : 0 0 0 2px rgba(190, 98, 217, 0.3); }
.passbook {
overflow : hidden; }
.passbook .plane {
position : absolute;
width : 100%;
height : 33px;
top : 0;
left : 0;
z-index : 3;
background : #59bbf5;
box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
border-radius : 18px 18px 0 0; }
.passbook .plane .picto {
position : absolute;
width : 16px;
height : 4px;
top : 14px;
left : 12px;
background : #fff;
border-radius : 0 3px 3px 0; }
.passbook .plane .picto:before {
position : absolute;
content : '';
width : 0;
height : 0;
top : -3px;
left : 0;
border-color : transparent transparent transparent white;
border-width : 5px;
border-style : solid; }
.passbook .plane .picto:after {
position : absolute;
content : '';
width : 8px;
height : 8px;
top : -3px;
left : 0;
border-right : 2px white solid;
border-bottom : 2px white solid;
-webkit-transform : rotateZ(-45deg);
-moz-transform : rotateZ(-45deg);
-ms-transform : rotateZ(-45deg);
-o-transform : rotateZ(-45deg);
transform : rotateZ(-45deg); }
.passbook .plane .knob {
position : absolute;
width : 20px;
height : 10px;
bottom : -9px;
left : 50%;
margin : 0 0 0 -10px;
z-index : 1;
overflow : hidden; }
.passbook .plane .knob:before {
position : absolute;
content : '';
width : 20px;
height : 20px;
top : -10px;
left : 50%;
margin : 0 0 0 -10px;
border-radius : 10px;
box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
background : #59bbf5; }
.passbook .movie {
position : absolute;
width : 100%;
height : 34px;
top : 33px;
left : 0;
z-index : 1;
box-shadow : 0 1px 0 0 rgba(69, 214, 0, 0.8) inset;
background : -webkit-linear-gradient(top, #44cf01 0%, #37bc00 100%);
background : -moz-linear-gradient(top, #44cf01 0%, #37bc00 100%);
background : -ms-linear-gradient(top, #44cf01 0%, #37bc00 100%);
background : -o-linear-gradient(top, #44cf01 0%, #37bc00 100%);
background : linear-gradient(top, #44cf01 0%, #37bc00 100%); }
.passbook .movie .picto {
position : absolute;
width : 9px;
height : 7px;
top : 16px;
left : 12px;
background : #fff;
box-shadow : 0 0 0 1px rgba(24, 187, 0, 0.8); }
.passbook .movie .picto:before {
position : absolute;
content : '';
width : 0;
height : 0;
top : 0;
right : -4px;
border-color : transparent white transparent transparent;
border-width : 4px;
border-style : solid; }
.passbook .movie .picto:after {
position : absolute;
content : '';
width : 20px;
height : 10px;
top : -10px;
left : -6px;
background-size : 10px 10px;
background-repeat : repeat-x;
background-position : 0 0;
background-image : -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 26%, white 50%, rgba(24, 187, 0, 0.7) 65%, rgba(24, 187, 0, 0) 80%);
background-image : -moz-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 26%, white 50%, rgba(24, 187, 0, 0.7) 65%, rgba(24, 187, 0, 0) 80%);
background-image : -ms-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 26%, white 50%, rgba(24, 187, 0, 0.7) 65%, rgba(24, 187, 0, 0) 80%);
background-image : -o-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 26%, white 50%, rgba(24, 187, 0, 0.7) 65%, rgba(24, 187, 0, 0) 80%);
background-image : radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 26%, white 50%, rgba(24, 187, 0, 0.7) 65%, rgba(24, 187, 0, 0) 80%); }
.passbook .coffee {
position : absolute;
width : 100%;
height : 33px;
top : 67px;
left : 0;
z-index : 2;
border-radius : 0 0 18px 18px;
box-shadow : 0 -1px 0 0 rgba(254, 151, 0, 0.8) inset;
background : -webkit-linear-gradient(top, #ffa003 0%, #fea000 100%);
background : -moz-linear-gradient(top, #ffa003 0%, #fea000 100%);
background : -ms-linear-gradient(top, #ffa003 0%, #fea000 100%);
background : -o-linear-gradient(top, #ffa003 0%, #fea000 100%);
background : linear-gradient(top, #ffa003 0%, #fea000 100%); }
.passbook .coffee .picto {
position : absolute;
width : 18px;
height : 9px;
top : 10px;
left : 8px;
background-size : 18px 18px;
background-repeat : no-repeat;
background-position : 0 -9px;
background-image : -webkit-radial-gradient(50% 50%, circle contain, white 0%, white 80%, transparent 81%);
background-image : -moz-radial-gradient(50% 50%, circle contain, white 0%, white 80%, transparent 81%);
background-image : -ms-radial-gradient(50% 50%, circle contain, white 0%, white 80%, transparent 81%);
background-image : -o-radial-gradient(50% 50%, circle contain, white 0%, white 80%, transparent 81%);
background-image : radial-gradient(50% 50%, circle contain, white 0%, white 80%, transparent 81%); }
.passbook .coffee .picto:before {
position : absolute;
content : '';
width : 3px;
height : 3px;
top : 0;
left : 0;
border : 1px white solid;
border-radius : 3px; }
.passbook .coffee .picto:after {
position : absolute;
content : '';
width : 10px;
height : 1px;
bottom : 1px;
left : 4px;
background : #fff; }
.passbook .coffee:before {
position : absolute;
content : '';
width : 100%;
height : 6px;
top : -2px;
z-index : 2;
background-size : 4px 4px;
background-repeat : repeat-x;
background-position : -3px 0;
background-image : -webkit-radial-gradient(50% 50%, circle cover, #37bc00 0%, #37bc00 60%, rgba(55, 188, 0, 0) 61%);
background-image : -moz-radial-gradient(50% 50%, circle cover, #37bc00 0%, #37bc00 60%, rgba(55, 188, 0, 0) 61%);
background-image : -ms-radial-gradient(50% 50%, circle cover, #37bc00 0%, #37bc00 60%, rgba(55, 188, 0, 0) 61%);
background-image : -o-radial-gradient(50% 50%, circle cover, #37bc00 0%, #37bc00 60%, rgba(55, 188, 0, 0) 61%);
background-image : radial-gradient(50% 50%, circle cover, #37bc00 0%, #37bc00 60%, rgba(55, 188, 0, 0) 61%); }
.mail {
box-shadow : 0 0 0 1px rgba(11, 70, 238, 0.1) inset;
background : -webkit-linear-gradient(top, #1a51f0 0%, #03e4fe 100%);
background : -moz-linear-gradient(top, #1a51f0 0%, #03e4fe 100%);
background : -ms-linear-gradient(top, #1a51f0 0%, #03e4fe 100%);
background : -o-linear-gradient(top, #1a51f0 0%, #03e4fe 100%);
background : linear-gradient(top, #1a51f0 0%, #03e4fe 100%); }
.mail .picto {
position : absolute;
width : 68px;
height : 46px;
top : 50%;
left : 50%;
margin : -23px 0 0 -34px;
overflow : hidden;
border-radius : 3px;
box-shadow : 0 0 0 1px rgba(5, 64, 234, 0.1); }
.mail .picto:before, .mail .picto:after {
position : absolute;
content : '';
width : 0;
height : 0;
border-width : 23px;
border-style : solid; }
.mail .picto:before {
top : 0;
left : 0;
border-color : transparent transparent transparent white; }
.mail .picto:after {
top : 0;
right : 0;
border-color : transparent white transparent transparent; }
.mail .picto .inner {
position : absolute; }
.mail .picto .inner.i1 {
width : 50px;
height : 50px;
top : -29px;
left : 9px;
z-index : 2;
background : #fff;
border-radius : 4px;
box-shadow : 0 0 0 2px #1ca4f7;
-webkit-transform : rotateZ(45deg);
-moz-transform : rotateZ(45deg);
-ms-transform : rotateZ(45deg);
-o-transform : rotateZ(45deg);
transform : rotateZ(45deg); }
.mail .picto .inner.i2 {
width : 50px;
height : 50px;
bottom : -29px;
left : 9px;
z-index : 1;
background : #fff;
border-radius : 8px;
box-shadow : 0 0 0 1px rgba(5, 64, 234, 0.1);
-webkit-transform : rotateZ(45deg);
-moz-transform : rotateZ(45deg);
-ms-transform : rotateZ(45deg);
-o-transform : rotateZ(45deg);
transform : rotateZ(45deg); }
.photos {
border : 1px #cfcfcf solid;
overflow : hidden; }
.photos .fan {
position : absolute;
width : 26px;
height : 40px;
top : 50%;
left : 50%;
border-radius : 22px;
-webkit-transform-origin : center center;
-moz-transform-origin : center center;
-ms-transform-origin : center center;
-o-transform-origin : center center;
transform-origin : center center; }
.photos .f1 {
margin : -42px 0 0 -13px;
z-index : 8;
box-shadow : 0 1px 0 0 rgba(250, 144, 29, 0.8) inset;
background : -webkit-linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%);
background : -o-linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%);
background : linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%); }
.photos .f2 {
margin : -38px 0 0 4px;
z-index : 1;
box-shadow : 0 1px 0 0 rgba(252, 228, 0, 0.8) inset;
-webkit-transform : rotateZ(45deg);
-moz-transform : rotateZ(45deg);
-ms-transform : rotateZ(45deg);
-o-transform : rotateZ(45deg);
transform : rotateZ(45deg);
background : -webkit-linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%);
background : -o-linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%);
background : linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%); }
.photos .f3 {
margin : -20px 0 0 10px;
z-index : 2;
box-shadow : 0 1px 0 0 rgba(187, 213, 41, 0.8) inset;
-webkit-transform : rotateZ(90deg);
-moz-transform : rotateZ(90deg);
-ms-transform : rotateZ(90deg);
-o-transform : rotateZ(90deg);
transform : rotateZ(90deg);
background : -webkit-linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%);
background : -o-linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%);
background : linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%); }
.photos .f4 {
margin : -4px 0 0 2px;
z-index : 3;
box-shadow : 0 1px 0 0 rgba(86, 189, 118, 0.8) inset;
-webkit-transform : rotateZ(135deg);
-moz-transform : rotateZ(135deg);
-ms-transform : rotateZ(135deg);
-o-transform : rotateZ(135deg);
transform : rotateZ(135deg);
background : -webkit-linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%);
background : -o-linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%);
background : linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%); }
.photos .f5 {
margin : 2px 0 0 -13px;
z-index : 4;
box-shadow : 0 1px 0 0 rgba(88, 165, 228, 0.8) inset;
-webkit-transform : rotateZ(180deg);
-moz-transform : rotateZ(180deg);
-ms-transform : rotateZ(180deg);
-o-transform : rotateZ(180deg);
transform : rotateZ(180deg);
background : -webkit-linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%);
background : -o-linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%);
background : linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%); }
.photos .f6 {
margin : -4px 0 0 -31px;
z-index : 5;
box-shadow : 0 1px 0 0 rgba(140, 127, 195, 0.8) inset;
-webkit-transform : rotateZ(225deg);
-moz-transform : rotateZ(225deg);
-ms-transform : rotateZ(225deg);
-o-transform : rotateZ(225deg);
transform : rotateZ(225deg);
background : -webkit-linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%);
background : -o-linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%);
background : linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%); }
.photos .f7 {
margin : -20px 0 0 -36px;
z-index : 6;
box-shadow : 0 1px 0 0 rgba(194, 126, 172, 0.8) inset;
-webkit-transform : rotateZ(270deg);
-moz-transform : rotateZ(270deg);
-ms-transform : rotateZ(270deg);
-o-transform : rotateZ(270deg);
transform : rotateZ(270deg);
background : -webkit-linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%);
background : -o-linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%);
background : linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%); }
.photos .f8 {
margin : -36px 0 0 -31px;
z-index : 7;
box-shadow : 0 1px 0 0 rgba(244, 73, 82, 0.8) inset;
-webkit-transform : rotateZ(315deg);
-moz-transform : rotateZ(315deg);
-ms-transform : rotateZ(315deg);
-o-transform : rotateZ(315deg);
transform : rotateZ(315deg);
background : -webkit-linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%);
background : -o-linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%);
background : linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%); }
.facetime {
background : -webkit-linear-gradient(top, #86fe65 0%, #06d315 100%);
background : -moz-linear-gradient(top, #86fe65 0%, #06d315 100%);
background : -ms-linear-gradient(top, #86fe65 0%, #06d315 100%);
background : -o-linear-gradient(top, #86fe65 0%, #06d315 100%);
background : linear-gradient(top, #86fe65 0%, #06d315 100%);
box-shadow : 0 0 0 1px rgba(134, 254, 101, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) inset; }
.facetime:before {
position : absolute;
content : '';
width : 2px;
height : 6px;
top : 38px;
left : 12px;
background : #fff;
box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.05); }
.facetime .picto {
position : absolute;
width : 49px;
height : 42px;
top : 28px;
left : 15px;
border-radius : 5px;
background : #fff;
box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.05); }
.facetime .picto:before {
position : absolute;
content : '';
width : 1px;
height : 34px;
top : 4px;
right : -20px;
background : #fff; }
.facetime .lens {
position : absolute;
width : 16px;
height : 34px;
top : 32px;
left : 66px;
overflow : hidden;
background : #fff; }
.facetime .lens:before, .facetime .lens:after {
position : absolute;
content : '';
left : 0;
border-style : solid;
border-width : 16px; }
.facetime .lens:before {
border-color : transparent transparent transparent #63f158;
top : -17px;
-webkit-transform : rotateZ(10deg);
-moz-transform : rotateZ(10deg);
-ms-transform : rotateZ(10deg);
-o-transform : rotateZ(10deg);
transform : rotateZ(10deg); }
.facetime .lens:after {
border-color : transparent transparent transparent #35e234;
bottom : -17px;
-webkit-transform : rotateZ(-10deg);
-moz-transform : rotateZ(-10deg);
-ms-transform : rotateZ(-10deg);
-o-transform : rotateZ(-10deg);
transform : rotateZ(-10deg); }
.safari {
border : 1px #cfcfcf solid; }
.safari .compass {
position : absolute;
width : 86px;
height : 86px;
top : 50%;
left : 50%;
overflow : hidden;
margin : -43px 0 0 -43px;
border-radius : 43px;
box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
-webkit-transform : rotateZ(45deg);
-moz-transform : rotateZ(45deg);
-ms-transform : rotateZ(45deg);
-o-transform : rotateZ(45deg);
transform : rotateZ(45deg);
background : -webkit-linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%);
background : -moz-linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%);
background : -ms-linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%);
background : -o-linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%);
background : linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%); }
.safari .compass:before, .safari .compass:after {
position : absolute;
content : '';
border-style : solid;
border-width : 43px;
z-index : 3;
-webkit-transform : scaleX(0.15);
-moz-transform : scaleX(0.15);
-ms-transform : scaleX(0.15);
-o-transform : scaleX(0.15);
transform : scaleX(0.15); }
.safari .compass:before {
top : 43px;
left : 0;
border-color : white transparent transparent transparent; }
.safari .compass:after {
top : -43px;
left : 0;
border-color : transparent transparent #fe3b2f transparent; }
.safari .scale {
position : absolute;
width : 80px;
height : 80px;
top : 50%;
left : 50%;
margin : -40px 0 0 -40px;
-webkit-transform : rotateZ(-45deg);
-moz-transform : rotateZ(-45deg);
-ms-transform : rotateZ(-45deg);
-o-transform : rotateZ(-45deg);
transform : rotateZ(-45deg); }
.safari .scale .line {
position : absolute;
width : 80px;
height : 80px;
top : 0;
left : 0; }
.safari .scale .line:after, .safari .scale .line:before {
position : absolute;
content : ''; }
.safari .scale .line:before {
width : 1px;
height : 80px;
top : 0;
left : 50%;
background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%);
background : -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%);
background : linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); }
.safari .scale .line:after {
width : 80px;
height : 1px;
top : 50%;
left : 0;
background : -webkit-linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%);
background : -moz-linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%);
background : -ms-linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%);
background : -o-linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%);
background : linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); }
.safari .scale .line.s:before {
background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%);
background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%);
background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%);
background : -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%);
background : linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); }
.safari .scale .line.s:after {
background : -webkit-linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%);
background : -moz-linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%);
background : -ms-linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%);
background : -o-linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%);
background : linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); }
.safari .scale .line.l1 {
-webkit-transform : rotateZ(0deg);
-moz-transform : rotateZ(0deg);
-ms-transform : rotateZ(0deg);
-o-transform : rotateZ(0deg);
transform : rotateZ(0deg); }
.safari .scale .line.l2 {
-webkit-transform : rotateZ(10deg);
-moz-transform : rotateZ(10deg);
-ms-transform : rotateZ(10deg);
-o-transform : rotateZ(10deg);
transform : rotateZ(10deg); }
.safari .scale .line.l3 {
-webkit-transform : rotateZ(20.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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