android的logo是一个有几个简单图形组成的机器人。本文的主要内容就是用纯
需要支持CSS3技术的浏览器来查看效果(ie9,火狐,谷歌或者opera都可)。
复制代码
技术和较少的HTML代码完成这个logo的绘制。
需要支持CSS3技术的浏览器来查看效果(ie9,火狐,谷歌或者opera都可)。
- <div class="android">
- <div class="head">
- <div class="eyes"></div>
- </div>
- <div class="body">
- <div class="arms"></div>
- </div>
- </div>
- .android {
- position: absolute;
- left: 320px;
- top: 230px;
- }
- /**** BODY ****/
- .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 ****/
- .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 ****/
- .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 ****/
- .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; }