51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

CSS3实现Android 安卓图标

时间:2017-08-15 16:16点击:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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><A href="http://www.51kydm.com/">http://www.51kydm.com/</A></div>
<div class="android">
    <div class="head">
        <div class="eyes"></div>
    </div>
    <div class="body">
        <div class="arms"></div>
    </div>
</div>
</body>
</html> 
51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开