<!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. Luogu P2743 [USACO5.1]乐曲主题Musical Themes

    链接 \(Click\) \(Here\) 人生第一道后缀数组的题目.首先要对输入的串进行差分处理,差分后长度为(\(n - 1\))的相同子段就是原串中长度为\(n\)的相同(可变调)子段.求出来\ ...

  2. nginx.conf配置文件详解

    一:nginx配置文件结构 nginx配置文件主要分为六个区域: main(全局设置).events(nginx工作模式).http(http设置). sever(主机设置).location(URL ...

  3. Ajax结合Json进行交互数据(四)

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. Intellij Idea识别Java Web项目

    使用maven生成一个Java项目,手动添加相应的web目录WEB_INF,web.xml等,此时idea没有自动识别为web项目,此时编辑web.xml文件会出现一些不该出现的错误,需要做的就是让i ...

  5. UEFI BIOS Rootkit Analysis

    catalog . BIOS简介 . UEFI BIOS . EFI编程简介 . UEFI Rootkit 1. BIOS简介 BIOS("Basic Input Output System ...

  6. 15、JDBC-CallableStatement

    一.存储过程 创建 CREATE DEFINER=CURRENT_USER PROCEDURE `adder`(IN a int, IN b int, OUT sum int) BEGIN DECLA ...

  7. springMVC的全局异常设置

    先说为什么要设置全局异常.比如说,你程序出错了,500错误,大家都知道,程序出错就不会往下面执行,但是客户端那边还是一直等待状态,所以,我们后台无论正常还是报错都要给客户端返回数据.当然,我们可以tr ...

  8. HDU - 6394 Tree（树分块+倍增）

    http://acm.hdu.edu.cn/showproblem.php?pid=6394 题意 给出一棵树,然后每个节点有一个权值,代表这个点可以往上面跳多远,问最少需要多少次可以跳出这颗树 分析 ...

  9. HDU 1575(裸矩阵快速幂)

    emmmmm..就是矩阵快速幂,直接附代码: #include <cstdio> using namespace std; ; ; struct Matrix { int m[maxn][ ...

  10. 解决浏览器跨域限制方案之CORS

    一.什么是CORS CORS是解决浏览器跨域限制的W3C标准,详见:https://www.w3.org/TR/cors/. 根据CORS标准的定义,在浏览器中访问跨域资源时,需要做如下实现: 服务端 ...