<!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. C#梳理【集合Collection】

    C# 集合(Collection) 集合(Collection)类是专门用于数据存储和检索的类.这些类提供了对栈(stack).队列(queue).列表(list)和哈希表(hash table)的支 ...

  2. M1-SaltStack&Flask-Day4

    1.virtualenv 虚拟环境 2.virtualenv env1 -p= 解释器路径 3. 进入Scripts 执行activate 激活配置 4.执行deactivate 取消激活配置 2.1 ...

  3. python对象的多重继承

    一个从多个父类继承过来的子类,可以访问所有父类的功能.并不推荐使用. 多重继承最简单有用的形式是mixin.假设在之前Contact类增加一个功能,允许给self.email发送一封邮件. class ...

  4. python操作execl学习笔记（一）

    本节只记录关于execl的读操作: execl 内容及格式 python3 #!/usr/bin/env python #-*- coding:utf-8 -*- import xlrd import ...

  5. Linux系统IO分析工具之iotop常用参数介绍

      Linux系统IO分析工具之iotop常用参数介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在一般运维工作中经常会遇到这么一个场景,服务器的IO负载很高(iostat中的 ...

  6. Spring Boot笔记三：配置文件

    配置文件这里需要讲的东西很多,所以我写在了这里,但是这个是和上篇文章衔接的,所以看这篇文章,先看上篇文章笔记二 一.单独的配置文件 配置文件里面不能都写我们的类的配置吧,这样那么多类太杂了,所以我们写 ...

  7. weblogic每天日志合并shell脚本 [个人记录]【转】【补】

    from RogerZhu modified by King sh logback.rb "/data/logs/" "/tmp/domain" "a ...

  8. 搭建Github博客：开始

    先看效果:ious.ml 记录使用hexo搭建个人博客的过程 至于在博客里记录什么内容,现在还没想好.已经熟悉了博客园,不想换. 1.概念 Github Pages Github Pages可以被认为 ...

  9. Lost connection to MySQL server during query，MySQL设置session,global变量及网络IO与索引

    Navicat导出百万级数据时,报错:2013 - Lost connection to MySQL server during query 网上一番搜索,修改mysql如下几处配置文件即可: sel ...

  10. mysql修改表结构语句

    mysql alter 用法,修改表,字段等信息   一: 修改表信息 1.修改表名 alter table test_a rename to sys_app; 2.修改表注释 alter table ...