<!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>无标题文档</title>
<style>
*{margin:0; padding:0;}
ul{list-style:none;}
.con_box{width:500px; height:500px; margin:50px auto 0; background:#ccc;}

/*头*/
.head{width:200px; height:200px; border:1px solid #222; border-radius:50%; margin:0 auto; background:-moz-linear-gradient(60deg,#0c4a64 0%,#04a6dc 40%,#1cc6ec 100%); background:-webkit-linear-gradient(60deg,#0c4a64 0%,#04a6dc 40%,#1cc6ec 100%); background:-o-linear-gradient(60deg,#0c4a64 0%,#04a6dc 40%,#1cc6ec 100%); position:relative; z-index:1;}

/*脸*/
.face{width:170px; height:130px; border:1px solid #222; border-radius:50%; background:-moz-linear-gradient(60deg,#94969c 0%,#dcdedc 15%,#fff 30%); background:-webkit-linear-gradient(60deg,#94969c 0%,#dcdedc 15%,#fff 30%); background:-o-linear-gradient(60deg,#94969c 0%,#dcdedc 15%,#fff 30%); position:absolute; bottom:10px; left:15px;}

/*嘴巴*/
.mouse{width:100px; height:40px; border-bottom:2px solid #222; border-radius:50%; position:absolute; bottom:20px; left:35px;}
.mouse:after{width:2px; height:67px; background:#222; content:""; position:absolute; bottom:0; left:49px;}

/*鼻子*/
.nose{width:20px; height:20px; border:1px solid #222; border-radius:50%; background:-moz-radial-gradient(70% 30%,farthest-side,#fff,#c43a04,#dc3900); background:-webkit-radial-gradient(70% 30%,farthest-side,#fff,#c43a04,#dc3900); background:-o-radial-gradient(70% 30%,farthest-side,#fff,#c43a04,#dc3900); position:absolute; top:20px; left:74px;}

/*胡须*/
.hair{width:133px; height:60px; position:absolute; top:30px; left:18px;}
.left_hair{width:60px; position:absolute; top:10px; left:0; background:#0f0;}
.right_hair{width:60px; position:absolute; top:10px; right:0;}
.left_hair ul li, .right_hair ul li{width:45px; height:1px; background:#222; position:absolute; margin:}
.lh1{top:5px; left:5px; transform:rotate(20deg);}
.lh2{top:20px; left:5px;}
.lh3{top:35px; left:5px; transform:rotate(-20deg);}

.rh1{top:5px; right:5px; transform:rotate(160deg);}
.rh2{top:20px; right:5px;}
.rh3{top:35px; right:5px; transform:rotate(-160deg);}

/*眼睛*/
.eyes{width:100px; height:60px; position:absolute; top:38px; left:50px;}
.left_eye{width:48px; height:50px; border:1px solid #222; border-radius:50%; background:#fff; position:relative; float:left;}
.left_eye:after{width:10px; height:10px; background:-moz-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%); background:-webkit-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%); background:-o-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%); border-radius:50%; content:""; position:absolute; bottom:10px; right:10px;}
.right_eye{width:48px; height:50px; border:1px solid #222; border-radius:50%; background:#fff; position:relative; float:right;}
.right_eye:after{width:10px; height:10px; background:-moz-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%); background:-webkit-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%); background:-o-radial-gradient(60% 60%,farthest-side,#fff 0%,#222 50%); border-radius:50%; content:""; position:absolute; bottom:10px; left:10px;}

/*身体*/
.body{width:250px; height:135px; position:relative; z-index:2; margin:-20px auto 0;}
.nab{width:120px; height:13px; border:1px solid #222; border-radius:13px; background:-moz-linear-gradient(top,#ac2a04 0%,#c43a04 20%,#941204 100%); background:-webkit-linear-gradient(top,#ac2a04 0%,#c43a04 20%,#941204 100%); background:-o-linear-gradient(top,#ac2a04 0%,#c43a04 20%,#941204 100%); position:absolute; top:0; left:64px; z-index:999;}

/*左手*/
.lhand{position:absolute; left:35px; top:0; z-index:1;}
.larm{width:35px; height:95px; background:-moz-linear-gradient(50deg,#047294 0%,#048eb4 100%); background:-webkit-linear-gradient(50deg,#047294 0%,#048eb4 100%); transform:rotate(50deg); background:-o-linear-gradient(50deg,#047294 0%,#048eb4 100%); border:1px solid #222; border-top:none;}
.l_hand{width:46px; height:46px; border:1px solid #222; border-radius:50%; background:-moz-linear-gradient(60deg,#d4cecc 0%,#fff 50%); background:-webkit-linear-gradient(60deg,#d4cecc 0%,#fff 50%); background:-o-linear-gradient(60deg,#d4cecc 0%,#fff 50%); position:absolute; bottom:0; right:25px;}

/*右手*/
.rhand{position:absolute; right:35px; top:0; z-index:1;}
.rarm{width:35px; height:95px; border:1px solid #222; border-top:none; background:#0cc6ec; transform:rotate(-50deg);}
.r_hand{width:46px; height:46px; border:1px solid #222; border-radius:50%; background:-moz-linear-gradient(60deg,#d4cecc 0%,#fff 50%); background:-webkit-linear-gradient(60deg,#d4cecc 0%,#fff 50%); background:-o-linear-gradient(60deg,#d4cecc 0%,#fff 50%); position:absolute; bottom:0; left:25px;}

/*身体*/
.bell_top{width:110px; height:40px; background:-moz-linear-gradient(left,#0484a8,#0cc6ec); background:-webkit-linear-gradient(left,#0484a8,#0cc6ec); background:-o-linear-gradient(left,#0484a8,#0cc6ec); position:absolute; top:15px; left:70px; z-index:2;}
.belly{width:140px; height:80px; border:1px solid #222; border-top:none; background:-moz-linear-gradient(left,#0480a4 0%,#0485a9 15%,#08add2 55%,#0abce2 70%,#0cc6ec 100%); background:-webkit-linear-gradient(left,#0480a4 0%,#0485a9 15%,#08add2 55%,#0abce2 70%,#0cc6ec 100%); background:-o-linear-gradient(left,#0480a4 0%,#0485a9 15%,#08add2 55%,#0abce2 70%,#0cc6ec 100%); position:absolute; top:55px; left:54px; z-index:10;}
.belly:after{width:20px; height:10px; content:""; background:#ccc; position:absolute; bottom:-1px; left:60px; border-top:1px solid #222; border-radius:20px 20px 0 0;}
.bag{width:100px; height:100px; border:1px solid #222; border-radius:50%; background:#fff; position:absolute; top:0; left:75px; z-index:20;}
.bag:after{width:80px; height:40px; border:1px solid #222; border-radius:0 0 80px 80px; content:""; position:absolute; bottom:10px; left:10px;}

/*铃铛*/
.bell{width:30px; height:30px; border:1px solid #222; border-radius:50%; background:-moz-radial-gradient(70% 30%,farthest-side,#fff,#fdeb6f,#dcc20d); background:-webkit-radial-gradient(70% 30%,farthest-side,#fff,#fdeb6f,#dcc20d); background:-o-radial-gradient(70% 30%,farthest-side,#fff,#fdeb6f,#dcc20d); position:absolute; top:5px; left:110px; z-index:9999;}
.bell:before{width:26px; height:2px; background:#222; content:""; position:absolute; top:5px; left:2px;}
.bell:after{width:30px; height:2px; background:#222; content:""; position:absolute; top:10px; left:0;}
.center{width:2px; height:8px; background:#222; position:absolute; bottom:0; left:14px;}
.center:after{width:8px; height:8px; background:#222; border-radius:50%; content:""; position:absolute; bottom:8px; left:-3px;}
.footer{width:200px; margin:0 auto; position:relative;}
.footer:before{width:80px; height:25px; background:-moz-linear-gradient(50deg,#ADADAD 0%,#fff 40%); background:-webkit-linear-gradient(50deg,#ADADAD 0%,#fff 40%); background:-o-linear-gradient(50deg,#ADADAD 0%,#fff 40%); border:1px solid #222; border-radius:80px 50px 50px 40px; content:""; position:absolute; top:0; left:15px;}
.footer:after{width:80px; height:25px; background:-moz-linear-gradient(-50deg,#fff 60%,#ADADAD 100%); background:-webkit-linear-gradient(-50deg,#fff 60%,#ADADAD 100%); background:-o-linear-gradient(-50deg,#fff 60%,#ADADAD 100%); border:1px solid #222; border-radius:50px 80px 40px 50px; content:""; position:absolute; top:0; right:15px;}
</style>
</head>

<body>
<div class="con_box">
<!-- 头部 -->
<div class="head">
<div class="face">
<div class="mouse"></div>
<div class="nose"></div>
<div class="hair">
<div class="left_hair">
<ul>
<li class="lh1"></li>
<li class="lh2"></li>
<li class="lh3"></li>
</ul>
</div>
<div class="right_hair">
<ul>
<li class="rh1"></li>
<li class="rh2"></li>
<li class="rh3"></li>
</ul>
</div>
</div>
</div>
<div class="eyes">
<div class="left_eye"></div>
<div class="right_eye"></div>
<br clear="all" />
</div>

</div>

<!-- 身体 -->
<div class="body">
<div class="nab"></div>
<div class="lhand">
<div class="larm"></div>
<div class="l_hand"></div>
</div>
<div class="rhand">
<div class="rarm"></div>
<div class="r_hand"></div>
</div>
<div class="bell_top"></div>
<div class="belly"></div>
<div class="bag"></div>
<div class="bell">
<div class="center"></div>
</div>
</div>
<div class="footer"></div>

</div>

</body>
</html>

css3小叮当（转载）的更多相关文章

  1. 转载——CSS3 Object-fit和Object-position

    在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...

  2. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  3. GJM ：JS + CSS3 打造炫酷3D相册 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  4. 使用Modernizr探测HTML5/CSS3新特性（转载）

    转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...

  5. 【转载】酷酷的CSS3三角形运用

    转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工 ...

  6. 转载：css3 box-shadow投影发光效果

    转载网址:http://www.wufangbo.com/css3-box-shadow/ CSS3的box-shadow属性 可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. bo ...

  7. 【转载】CSS3的calc()使用

    文章转载自 w3cplus http://www.w3cplus.com/ 原文链接:http://www.w3cplus.com/css3/how-to-use-css3-calc-function ...

  8. 【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  9. （转载）CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. 61.index CUD

    主要知识点 索引CUD     一.创建索引的语法     PUT /my_index { "settings": { ... any settings ... }, " ...

  2. 渗透实战（周四）：CSRF跨站域请求伪造

    上图是广东外语外贸大学北校区内MBA中心旁边酒店房间的Wi-Fi网络环境,假设我们的Kali攻击机连入到SSID为414(房间号)的Wi-Fi网络,其IP地址:192.168.43.80 .同一Wi- ...

  3. Git 基础教程 之 删除文件

    ① 手动或命令 rm删除工作区的问价:       git checkout -- readme.txt 可恢复       checkout 实际上是用版本库里的替换工作区的版本 ② 删除了工作区文 ...

  4. （32）Spring Boot使用@SpringBootApplication注解，从零开始学Spring Boot

    [来也匆匆,去也匆匆,在此留下您的脚印吧,转发点赞评论] 如果看了我之前的文章,这个节你就可以忽略了,这个是针对一些刚入门的选手存在的困惑进行写的一篇文章. 很多Spring Boot开发者总是使用 ...

  5. 洛谷 P1903 BZOJ 2120 清橙 A1274【模板】分块/带修改莫队（数颜色）(周奕超)

    试题来源 2011中国国家集训队命题答辩 题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔 ...

  6. 关于SharePoint讨论板的一些知识（2）--视图中的栏目

    关于SharePoint讨论板的一些知识(2)--视图中的栏目         新建讨论后,默认显示四个栏目:主题.创建者.答复和上次更新时间.         从功能区的当前视图能够看出这是默认的主 ...

  7. Empower Developers

     Empower Developers Timothy High THingS ARE uSuAlly EASiER SAid THAn donE, and software architects ...

  8. Hibernate 自定义方言

    自定义一个方言类——Hibernate Dialect 标签: hibernatesqlserverjdbcmysql数据库java 2012-07-04 18:46 2847人阅读 评论(1) 收藏 ...

  9. 消息推送之百度云推送Android集成与用法

    这两天因为项目须要.研究了一下百度云推送,本来这事没什么多大工作量的,但注冊百度开发人员账户创建应用令我蛋疼菊紧了好一阵,这些东西做了对技术没啥提升,不做又不行,必经之路. 好在我耗费了N多个毫毫秒秒 ...

  10. GNU TeXmacs 1.99.8 发布，所见即所得科学编辑器（看看老实的GUI）

    GNU TeXmacs 1.99.8 已发布,这是一个支持各种数学公式的所见即所得编辑器,可以用来编辑文本.图形.数学.交互内容,它的界面非常友好,并且内置高质量的排版引擎. 更新内容: bug 修复 ...