CSS绘制安卓机器人
来源:互联网 发布:怎么做好一个淘宝客 编辑:程序博客网 时间:2024/06/04 18:24
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; }
- CSS绘制安卓机器人
- opengl绘制移动的安卓机器人
- Android自定义View【实战教程】5⃣️---Canvas详解及代码绘制安卓机器人
- css3安卓机器人旋转
- 纯css打造安卓机器人(CSS3.0)IE9,火狐,chrome能查看效果
- 安卓绘制五角星
- 安卓绘制
- 安卓绘制圆形图片
- 安卓绘制贝塞尔曲线
- UG8.0教程之安卓机器人
- 绘制Android的机器人
- 绘制Android的机器人
- 绘制Android机器人
- css3绘制机器人
- 安卓绘制Canvas与坐标(一)
- 安卓使用Canvas绘制工作日程表
- 安卓DigitalClock类绘制时间显示
- 安卓Button边框的绘制
- c++中如何利用vector fstream进行文件的读取
- js 如何获取文本框中光标索引位置
- 博士这条船[转自交大思源,长文]
- C语言feof了解
- 绘制多个图形
- CSS绘制安卓机器人
- 关于java的DNS解析IP缓存问题
- linux进入系统后root帐号不能登录,密码正确就是不登录
- 编程语言之JavaScript
- matlab 每次从一个txt文件(里面每行是一个图像名字,如1.jpg之类的)读取一行字符串
- 在Outlook 2010中如何实现
- android usb大容量储存时sd卡状态监听
- web.xml配置详解
- HTML5滑动的拼图游戏