欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS绘制Android Robot_html/css_WEB-ITnose

程序员文章站 2022-05-17 15:10:42
...
置顶文章:《纯CSS打造银色MacBook Air(完整版)》 上一篇:《Canvas模拟粒子系统》

作者主页:myvin
博主QQ:851399101(点击QQ和博主发起临时会话)

正文

用css绘制的Android Robot,比较简单,主要用了position,还有rotate和translete属性。因为简单就不说了。先上效果图,再直接上代码。

实时效果图和代码也可以点击这里到codepen上查看。

效果如如下:

[效果图](http://images.cnblogs.com/cnblogs_com/myvin/710118/o_robot%20android.png)

代码

HTML Markup

Android robot

CSS Code

body{    background-color: #444444;    margin:0 auto;    padding:0 auto;}.android{    position: relative;    margin-top:210px;    margin-left:200px;    }.body{    position: absolute;    width: 336px;    height: 285px;    background: #00cc00;    border-radius: 0px 0px 40px 40px;}.body:before,.body:after{    content: '';    width: 75px;    height: 122px;    background: #00cc00;    position: absolute;    bottom: -122px;    border-radius:0px 0px 20px 20px;}.body:before{left:70px;}.body:after{right:70px;}.head{    width: 336px;    height:155px;    border-radius:300px 300px 0px 0px;    background: #00cc00;    position: absolute;    top: -175px;}.head:before,.head:after{    content:'';    width: 10px;    height: 53px;    background: #00cc00;    position: absolute;}.head:before{-webkit-transform:translate(60px,0px) rotate(-30deg);}.head:after{-webkit-transform:translate(276px,0px) rotate(30deg);}.eyes:before,.eyes:after{    content: '';    width: 27px;    height: 27px;    border-radius:27px 27px 27px 27px;    background: white;    position: absolute;}.eyes:before{left: 85px;top: 50px;}.eyes:after{right: 85px;top: 50px;}.arms:before,.arms:after{    content: '';    width: 75px;    height: 233px;    background: #00cc00;    border-radius: 75px 75px 75px 75px;    position: absolute;}.arms:before{left: -90px;}.arms:after{right:-90px;}


转载请记得说明作者和出处哦-.-
作者:myvin
原文出处:

上一篇:《Canvas模拟粒子系统》 置顶文章:《纯CSS打造银色MacBook Air(完整版)》