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..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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