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
原文出处:
推荐阅读
-
Android属性动画Property Animation系列一之ObjectAnimator_html/css_WEB-ITnose
-
CSS3绘制圆角矩形的简单示例_html/css_WEB-ITnose
-
Android ViewAnimation(tween animation补间动画)文档教程_html/css_WEB-ITnose
-
Android动画基础--属性动画(Property Animation)_html/css_WEB-ITnose
-
[DIV+CSS] 绘制2重交叉表_html/css_WEB-ITnose
-
[开源] Android 代码高亮控件_html/css_WEB-ITnose
-
石头教你如何用纯CSS3绘制三角形、箭头。_html/css_WEB-ITnose
-
[开源] Android 代码高亮控件_html/css_WEB-ITnose
-
Android属性动画Property Animation系列三之LayoutTransition(布局容器动画)_html/css_WEB-ITnose
-
Google 开源的 Android 排版库:FlexboxLayout_html/css_WEB-ITnose