前端小案例--android机器人

这是CSS部分

*{padding: 0;margin: 0;}body{background-color: #ccc;}.content{width: 500px;height: 600px;border: 1px solid #F12528;background-color: #D4D4D4;margin: 50px auto;}.an_header{width: 250px;height: 150px;background-color: #177534;margin: 20px auto;border-radius: 130px 130px 0 0;position: relative;}.an_header::before,.an_header::after{content: "";width: 20px;height: 20px;
/*          top: 65px*/background-color:#FFFFFF;position: absolute;border-radius:50%;}.an_header::before{left: 70px;top:70px}.an_header::after{right:70px;top:70px;}.an_body{width: 250px;height: 250px;top: -10px;background-color: #177534;position: relative;margin: 0 auto;border-radius:0 0  20px 20px ;}.an_body::before,.an_body::after{content: "";top:16px;width: 25px;height: 200px;border-radius: 10px;background-color: #177534;position: absolute;}.an_body::before{left: -33px;}.an_body::after{right: -33px;}.an_footer{width: 25px;height: 100px;position: relative;margin: 0 auto;}.an_footer::before,.an_footer::after{content: "";height: 100px;width: 25px;position: absolute;background-color: #177534;border-radius:0 0 10px 10px;}.an_footer::before{left: 50px;top:-10px;}.an_footer::after{right: 50px;top:-10px;}

HTML部分：

<div class="content"><div class="an_header"></div><div class="an_body"></div><div class="an_footer"></div>
</div>

效果图：

这样一个的小案例就完成啦~

前端小案例--android机器人相关推荐

前端小案例之3D导航栏
简单3D导航栏案例-鼠标经过盒子时底部盒子旋转最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家. 文章目录简单3D导航栏案例-鼠标经过盒子时底部盒子旋转一 ...
【前端小案例】浪漫动态爱心
爱心 1. 案例简介 2. 爱心实现 2.1 盒子模型 2.2 CSS样式 2.3 JS实现动效 3. 完整源码 1. 案例简介最近网剧<点燃我,温暖你>热映,相信广大男同胞的女朋友都在 ...
30个HTML+CSS前端开发案例（一）
30个前端小案例(1-5) 三角形百度新闻热榜仿小米商城左侧菜单产品展示效果精美分页效果三角形 <!DOCTYPE html> <html><head>& ...
初中参观机器人博物馆的作文_展馆导览机器人好不好用？小笨展馆机器人案例...
每次科技发展都会给社会带来技术变革,例如工业革命时代的纺纱机,发电机等,极大地提高了生产效率,推动了社会的进步.二十一世纪,人工智能成为了当下技术变革的排头兵,机器人作为其载体已经被应用在各类展馆当中 ...
前端实战小案例--canvas实战之FlappyBird小游戏
前端实战小案例--canvas实战之FlappyBird小游戏想练习更多前端案例,请进个人主页,点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0!谢谢了! 不积跬步无以至千里 ...
省钱兄校园跑腿源码（公众号+APP+小程序+Android+IOS）校园跑腿社区跑腿同城跑腿任务兼职小程序uniapp前端模版
开源代码是用户端uniapp部分源码,使用hbuilder导入即可运行只提供参考学习使用!已经获得软著!不可商业使用!感谢支持 h5体验地址 h5:https://paotui.xianmxkj.c ...
【Android笔记65】Android小案例之简易版的房贷计算器（附源代码）
这篇文章,主要介绍如何使用Android实现一个简易版的房贷计算器小案例. 目录一.房贷计算器 1.1.运行效果演示 1.2.前提准备 (1)等额本息和等额本金
Android学习之路（4）——小案例
本案例完成一个装备案例看下我们需要完成的效果: 登录界面(activity_register.xml) 信息界面(activity_info.xml) 角色界面(activity_char.xml) ...
前端CSS3实现3D相册小案例
前端CSS3实现3D相册小案例 HTML代码部分: <!DOCTYPE html> <html lang="en"> <head> <me ...

前端小案例--android机器人

前端小案例--android机器人相关推荐

最新文章

热门文章