CSS3小案例之安卓机器人

效果展示：

知识点：
1.伪元素选择器.head::before,.head::after {}
一定要加content: ;
2.设置圆角
border-radius: 50%;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.content {width: 400px;height: 430px;border:1px solid red;position: relative;}.head {width: 200px;height: 100px;background: green;border-top-left-radius: 200px;border-top-right-radius: 200px;margin:10px auto;position: relative;}.head::before,.head::after {content: "";width: 30px;height: 30px;border-radius: 50%;background: #fff;position: absolute;top:50px;left: 40px;}.head::after {left: 126px;}.body {height: 200px;width: 200px;background: green;margin: 10px auto;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;position: relative;}.body:before,.body:after {content: "";height: 140px;width: 24px;border-radius: 10px;background: green;position: absolute;top:20px;left: -40px;}.body:after {left:220px;}.left,.right {height: 100px;width: 20px;background: green;border-radius: 10px;position: absolute;left:140px;top:310px;}.right {left: 230px;}</style><title>Document</title>
</head>
<body><div class="content"><div class="head"></div><div class="body"></div><div class="foot"><div class="left"></div><div class="right"></div></div></div>
</body>
</html>

本文属个人学习整理记载

CSS3小案例之安卓机器人相关推荐

CSS3案例之安卓机器人图形
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
canvas效果案例：安卓机器人
利用之前所学的线的样式及上节的弧形画一个简单的机器人吧! // 开始新的路径ctx.beginPath();// 描边色 ctx.strokeStyle = 'green';// 线宽ctx.line ...
[css3] 小案例-扇子
使用到的知识点:过渡,旋转,透明,调整旋转中心,定位 <!DOCTYPE html> <html lang="en"><head><met ...
HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...
安卓逆向小案例——阿里系某电影票务APP加密参数还原-Unidbg篇
安卓逆向小案例--阿里系某电影票务APP加密参数还原-Unidbg篇一.前期准备使用unidbg还原参数时,首先需要找到指定的native方法和对应的so文件.而锁定生成加密参数的native方法 ...
CSS3过渡小案例：折扇
CSS3过渡小案例:折扇简单应用:利用鼠标经过后盒子阴影和上边距属性的改变,制作一个简单的页面效果小案例:折扇案例 CSS3的过渡效果: 通过 CSS3的过渡效果,我们可以在不使用 Flash ...
前端CSS3实现3D相册小案例
前端CSS3实现3D相册小案例 HTML代码部分: <!DOCTYPE html> <html lang="en"> <head> <me ...
前端小案例--android机器人
这是CSS部分 *{padding: 0;margin: 0;}body{background-color: #ccc;}.content{width: 500px;height: 600px;bor ...
【Node.js学习小案例】DNS域名解析一
Node.js 百度百科: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞I/ ...

CSS3小案例之安卓机器人

CSS3小案例之安卓机器人相关推荐

最新文章

热门文章