css3小叮当（转载）

<!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>

</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小叮当（转载）的更多相关文章

转载——CSS3 Object-fit和Object-position
在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...
转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
目标大纲文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
GJM ：JS + CSS3 打造炫酷3D相册 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
使用Modernizr探测HTML5/CSS3新特性（转载）
转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...
【转载】酷酷的CSS3三角形运用
转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工 ...
转载：css3 box-shadow投影发光效果
转载网址:http://www.wufangbo.com/css3-box-shadow/ CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. bo ...
【转载】CSS3的calc()使用
文章转载自 w3cplus http://www.w3cplus.com/ 原文链接:http://www.w3cplus.com/css3/how-to-use-css3-calc-function ...
【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用
文章转载自张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
（转载）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- ...

随机推荐

Python实现8中常用排序算法
L = [2,6,4,7,9,1,3,5,8] # 1.插入排序 def insert_sort(List): n = len(List) for i in range(1,n): # 得到索引 j ...
jvm学习-ClassLoader(二)
ClassLoader结构 jdk加载的4个步骤 CustomClassLoader 用户自定义的classLoader APPClassLoader主要加载classPath下面的class Ext ...
print puts p 用法
print puts p 用法 print "a\n" puts "a" p "a\n" 输出为 a a "a\n" p ...
Chrome Extension 的 webRequest模块的解读
Chrome Extension 的 webRequest模块的解读文档在此:http://developer.chrome.com/trunk/extensions/webRequest.ht ...
URL重写及ASP.NET路由、Http处理模块、程序等
这段时间在学习ASP.NET路由.HTTP处理等内容,了解了一些,但又未完全弄懂,似是而非,不管如何,作一总结,供日后借鉴和修改. 一.IIS6和IIS7经典模式和集成模式在IIS6及IIS7经典模 ...
Linux USB 驱动开发（一）—— USB设备基础概念【转】
本文转载自:http://blog.csdn.net/zqixiao_09/article/details/50984074 在终端用户看来,USB设备为主机提供了多种多样的附加功能,如文件传输,声音 ...
python 读取二进制文件转为16进制输出
示例: #!/usr/bin/env python #encoding: utf-8 import binascii fh = open(r'C:\Temp\img\2012517165556.png ...
python基本数据类型之列表list
list的基本功能结果类型中括号括起来逗号(,)分割每一个元素列表中的元素可以是数字,字符串,列表,布尔值所有的都能放索引,切片 ? 1 2 3 li = [1, 3, 5, " ...
关于chm提示已取消到该网页的导航的解决方法
下载了一个chm文件,打开提示“已取消到该网页的导航”,以前以为是文件有问题,下载其他的也是出现这种情况,于是网上搜了下,解决方法如下: 方法 1 1. 双击此 .chm 文件. 2. 在“打开文件安 ...
关于一些UI的插件(杂)
1.时间插件 //日期框 $('.date-picker').datepicker(); 2.checkbox 保存checkbox的值 // 组装选择的标签 var check = $(" ...

css3小叮当（转载）

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

随机推荐

热门专题