码迷,mamicode.com
首页 > 移动开发 > 详细

CSS3实现Android 安卓图标

时间:2015-05-25 16:21:15      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<title>CSS3 Android 安卓图标</title>
<style>
.android {
position: absolute;
left: 320px;
top: 230px;
}
.body {
width: 336px;
height: 285px;
background-color: #A5C63B;
border-radius: 0px 0px 30px 30px;
position: absolute;
}
.body:before,
.body:after {
background-color: #A5C63B;
content: ‘‘;
width: 75px;
height: 122px;
bottom: -122px;
position: absolute;
border-radius: 0px 0px 50px 50px;
}
.body:before { left: 68px; }
.body:after{ right: 68px; }
.head {
width: 336px;
height: 155px;
background-color: #A5C63B;
border-radius: 200px 200px 0px 0px;
position: absolute;
top: -170px;
}
.head:before,
.head:after {
background-color: #A5C63B;
content: ‘‘;
width: 10px;
height: 53px;
position: absolute;
top: -30px;
border-radius: 20px 20px 0px 0px;
}
.head:after { -webkit-transform: translate(63px, 0px) rotate(-30deg); -moz-transform:translate(63px, 0px) rotate(-30deg); -o-
transform:translate(63px, 0px) rotate(-30deg); }
.head:before{ -webkit-transform: translate(255px, 0px) rotate(30deg); -moz-transform:translate(255px, 0px) rotate(30deg); -o-
transform:translate(255px, 0px) rotate(30deg); }
.arms:before,
.arms:after {
background-color: #A5C63B;
content: ‘‘;
width: 75px;
height: 233px;
top: -8px;
position: absolute;
border-radius: 40px 40px 40px 40px;
}
.arms:before { left: -90px; }
.arms:after{ right: -90px; }
.eyes:before,
.eyes:after {
background-color: #FFFFFF;
content: ‘‘;
width: 27px;
height: 27px;
top: 68px;
position: absolute;
border-radius: 20px;
}
.eyes:before { left: 78px;}
.eyes:after{ right: 78px;}
</style>
</head>
<body>
<div>http://www.999jiujiu.com/</div>
<div class="android">
<div class="head">
<div class="eyes"></div>
</div>
<div class="body">
<div class="arms"></div>
</div>
</div>
</body>
</html>

CSS3实现Android 安卓图标

标签:

原文地址:http://www.cnblogs.com/life6688/p/4527968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!