<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>test页面</title>
 <style type="text/css">
 /*关于css3 的两个伪类 ::before  ::after*/
     .box{
         margin: 0 auto;
         width: 360px;
         height: 500px;
     }
     /*头部*/
     .box_head{
         margin: 0px auto;
         width: 260px;
         height: 140px;
         background-color: greenyellow;
         border-radius: 130px 130px 0 0;
     }
     .box_head::before{
         content:'';
         display: block;
         width: 26px;
         height: 26px;
         border-radius: 13px;
         background-color: white;
         transform: translate(170px,58px);
     }
     .box_head::after{
         content:'';
         display: block;
         width: 26px;
         height: 26px;
         border-radius: 13px;
         background-color: white;
         transform:translate(65px,33px);
     }
     /*中间*/
     .box_conten{
         margin: 0px auto;
         margin-top:10px;
         width: 260px;
         height: 240px;
         background-color: greenyellow;
         border-radius: 0  0 30px 30px;
     }
     .box_conten::before{
         content:'';
         display: block;
         width: 50px;
         height: 180px;
         border-radius: 12px;
         background-color: greenyellow;
         transform: translate(-70px,20px);
     }
     .box_conten::after{
         content:'';
         display: block;
         width: 50px;
         height: 180px;
         border-radius: 12px;
         background-color:greenyellow;
         transform:translate(280px,-162px);
     }
     /*底部*/
     .footer{
         margin: 0px auto;
         width:50px;
         height: 20px;
     }
     .footer::before{
         content:'';
         display: block;
         width: 50px;
         height: 135px;
         border-radius: 0  0 15px 15px;
         background-color: greenyellow;
         transform: translate(-51px,-8px);
     }
     .footer::after{
         content:'';
         display: block;
         width: 50px;
         height: 135px;
         border-radius: 0  0 15px 15px;
         background-color: greenyellow;
         transform: translate(51px,-143px);
     }
 </style>
 </head>
 <body>
 <div class="box">
     <div class="box_head"></div>
     <div class="box_conten"></div>
     <div class="footer"></div>
 </div>
 </body>
 </html>

css3 特效拓展 画个安卓机器人的更多相关文章

  1. MFC简单绘制安卓机器人

    原始日期:2014-03-29 20:35 众所周知,google的安卓机器人形象十分经典,包括眼睛的位置,胳膊以及天线的位置都是有固定位置和比例的,而且是最恰当的,看起来最美.而微软基础类库MFC绘 ...

  2. CSS3 特效分解一

    先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...

  3. 15款效果很酷的最新jQuery/CSS3特效

    很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换 一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...

  4. CSS3特效之转化（transform）和过渡（transition）

    CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...

  5. 圆周运动的css3特效案例

    <!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...

  6. h5-圆角的使用-案例安卓机器人

    1.圆角的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. css3的特效拓展...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 9 款赏心悦目的 HTML5/CSS3 特效

    1.HTML5 WebGL实验,超酷的HTML5 Canvas波浪墙 这是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果. 在线演示 ...

  9. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

随机推荐

  1. python类继承的重写和super

    给已经存在的类添加新的行为,继承是非常好的实现方式.但是如果要改变行为呢?比如在Python继承扩展内置类,我们的contact类只允许一个名字和一个邮箱,但是如果要对某些人增加电话号码呢?这里可以通 ...

  2. Mysql数据约束 整理

    数据约束 1.默认值: 作用: 当用户对使用默认值的字段不插入值的时候,就使用默认值. 注意: 1)对默认值字段插入null是可以的. 2)对默认值字段可以插入非null   CREATE TABLE ...

  3. JSP学习记录

    <%@ page contentType="text/html;charset=gb2312" %> <html> <h1>计算器</h1 ...

  4. zookeeper下的基本操作

    安装好zk之后 启动服务端:在bin目录下 zkServer.sh restart 启动客户端 zkCli.sh 检查是否启动 直接输入jps命令,显示下面则表示启动成功 [root@iZbp12gg ...

  5. 19.职责链模式（Chain of Responsibility Pattern）

    19.职责链模式(Chain of Responsibility Pattern)

  6. python 计算机发展史,线程Process使用 for循环创建 2种传参方式 jion方法 __main__的解释

    ########################总结################## #一 操作系统的作用: 1:隐藏丑陋复杂的硬件接口,提供良好的抽象接口 2:管理.调度进程,并且将多个进程对硬 ...

  7. javascript中click和onclick的区别

    <script type="text/javascript"> $(function(){ $("#btn4").click(function(){ ...

  8. Eclipse复制web项目怎么改

    在学习中,做一个项目时 , 完成到了某一阶段 实现了部分功能,有必要保存这一项目, 1  在以后的学习中如果能顺利的完成后续部分,可以在需要特定功能时 复习这个项目,  (必要性) 2  如果在后续的 ...

  9. 038、Docker 的两类存储资源（2019-02-27 周三）

    参考https://www.cnblogs.com/CloudMan6/p/7127843.html   Docker为容器提供了两种存放数据的资源:       1.由storage driver  ...

  10. 细说tomcat之类加载器

    官网:http://tomcat.apache.org/tomcat-7.0-doc/class-loader-howto.htmlJava类加载与Tomcat类加载器层级关系对比 Java Clas ...