<!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. hystrix实战总结；

    HystrixCircuitBreaker 有三种状态 : 断路器默认是20个请求失败才打开短路器,可以进行配置: CLOSED :关闭 OPEN :打开 HALF_OPEN :半开 1.接口正确,接 ...

  2. 在linux下面解压用的zxpf是什么意思,它跟zxvf有啥区别

    在linux下面解压用的zxpf是什么意思,它跟zxvf有啥区别 linux 命令中tar后跟的zxvf是什么意思:.tar.gz是一个压缩包   .tar只是打包而没有压缩 z:表示 tar 包是被 ...

  3. break #立即终止本次循环

    #!/user/bin/python# -*- coding:utf-8 -*-# print(111)# while True:# print(222)# print(333)# break #立即 ...

  4. python 发送邮件模板

    ##发送普通txt文件(与发送html邮件不同的是邮件内容设置里的type设置为text,下面代码为发送普通邮件的另一种方法) import smtplibimport stringfrom emai ...

  5. Dubbo优雅关机原理

    Dubbo是通过JDK的ShutdownHook来完成优雅停机的 所以如果用户使用 kill -9 PID 等强制关闭命令,是不会执行优雅停机的 只有通过 kill PID时,才会执行 原理: · 服 ...

  6. Windows netstat 查看端口、进程占用 查看进程路径

    1.查看端口.进程占用 运行->进入cmd->netstat -ano 2.查看进程路径 运行->WMIC->process 3.查看进程PID和占用内存情况 运行->进 ...

  7. Idea构建maven项目

    Idea构建maven项目: 步骤一: 步骤二: 自动导入Maven项目: 步骤三:增加web 二:搭建spring项目结构: 结构图: 网上都是一大堆的:自己也可以去搜:ssm  pom.xml  ...

  8. 建立爬虫代理IP池

    单线程构建爬虫代理IP池 #!/usr/bin/python3.5 # -*- coding:utf-8 -*- import time import tempfile from lxml impor ...

  9. Scrapy基础01

    一.Scarpy简介 Scrapy基于事件驱动网络框架 Twisted 编写.(Event-driven networking) 因此,Scrapy基于并发性考虑由非阻塞(即异步)的实现. 参考:武S ...

  10. CSS魔法（五）项目实战

    三大标签--title.description.keyword   淘宝网 <title>淘宝网 - 淘!我喜欢</title> <meta name="spm ...