由纯CSS打造的Android机器人

  • A+
所属分类:DIV+CSS

android的logo是一个有几个简单图形组成的机器人。本文的主要内容就是用纯CSS3技术和较少的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; }

复制代码

转载本文需注明转自HTML5中国

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: