<!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. RS485 / RS422

    RS422可以变为RS485:A和Y短路(然后接T/R+),B和Z短路(然后接T/R-) RS485是半双工,只有两根线通信线,要么接收状态,要么发送状态 RE为低电平,作为接收器 DE为高电平,作为 ...

  2. ZooKeeper集群详细安装教程

    1. 安装JDK 1.1 官网下载JDK 进入网址<a href="http://www.oracle.com/technetwork/java/javase/downloads/jd ...

  3. 关键字（6）：trigger触发器

    trigger是个特殊的存储过程,它的执行不是由程序调用,也不是手工启动,而是由事件来触发,比如当对一个表进行操作(insert,delete,update)时就会激活它执行.触发器经常用于加强数据的 ...

  4. 关于java文件下载文件名乱码问题解决方案

    JAVA文件下载时乱码有两种情况: 1,下载时中文文件名乱码 2,下载时因为路径中包含中文文件名乱码,提示找不到文件 解决方法见下面部分代码 response.setContentType(" ...

  5. spring boot 返回json字符串 null值转空字符串

    @Configuration public class JacksonConfig { @Bean @Primary @ConditionalOnMissingBean(ObjectMapper.cl ...

  6. MySQL复制相关参数详解

    MySQL复制相关参数详解 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.复制相关系统变量 1>.server_id 是必须设置在master和每个slave上的唯一标 ...

  7. composer 更换国内镜像源

    使用 Composer 镜像加速有两种选项: 选项一:全局配置,这样所有项目都能惠及(推荐):选项二:单独项目配置: 选项一.全局配置(推荐) $ composer config -g repo.pa ...

  8. Python绘制wav文件音频图(静态)[matplotlib/wave]

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ 绘制波形图 plottingWaveform.py "&qu ...

  9. C# Serializable

    System.SerializableAttribute 串行化是指存储和获取磁盘文件.内存或其他地方中的对象.在串行化时,所有的实例数据都保存到存储介质上,在取消串行化时,对象会被还原,且不能与其原 ...

  10. 前端面试题整理—HTML/CSS篇

    1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并 ...