CSS3实现Android 安卓图标

2020-01-27 14:20:04

字体：大中小

来源：转载

供稿：网友

CSS3实现的安卓图标，Android机器人图标，学习CSS3布局的极好的范例素材，只不过现在主流的IE8并不支持CSS3.所以大家测试的话，请使用Chrome、火狐或Oprea等浏览器。用CSS实现图标其实也挺方便，本例来说，主要是用到了CSS3中的transform、transition、border-radius等属性，请了解。

<!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 class="android">    <div class="head">        <div class="eyes"></div>    </div>    <div class="body">        <div class="arms"></div>    </div></div></body></html>

上一篇：鼠标放上会放大的CSS分页按钮样式

下一篇：一个按钮CSS3 返回按钮

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注