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

随机推荐

ecshop中{$lang.}标签的修改
{$lang.}之类的文字都是在语言包里边定义的,所以要修改这些文字的话,我们只需要修改语言包里的文件.首先需要看一下你使用的语言是哪种,如果是中文的话,修改 languages/zh_cn/com ...
string.Format 格式化日期格式
DateTime dt = DateTime.Now;//2010年10月4日 17点05分 string str = ""; //st ...
域名和ip、端口的关系
背景:新建一个项目,属于RPC服务,调用时需要ip+端口. 在工单系统里走流程,强制填写域名.之前也操作过,感觉域名不重要.我本来需要填写ip+端口,你给整个域名,那我端口往哪写?(一直以为域名=ip ...
【hihocoder 1296】数论三·约瑟夫问题
[题目链接]:http://hihocoder.com/problemset/problem/1296 [题意] [题解] [Number Of WA] 0 [完整代码] #include <b ...
POJ 1694 An Old Stone Game
题目: Description There is an old stone game, played on an arbitrary general tree T. The goal is to pu ...
第一次训练密码：acmore
#include <cstdio> #include <cstring> #define M 100010 #define INF 0x7FFFFFFF #define Min ...
（23）Spring Boot启动加载数据CommandLineRunner【从零开始学Spring Boot】
[Spring Boot 系列博客] )前言[从零开始学Spring Boot] : http://412887952-qq-com.iteye.com/blog/2291496 )spring bo ...
States of Integrity Constraints
States of Integrity Constraints As part of constraint definition, you can specify how and when Oracl ...
poj 1466 最大独立集
#include<stdio.h> #include<string.h>//这个分开后男的站在一边女的站在一边,不肯能有les或者gay.最大独立集=n-最大匹配数 #defi ...
rsync与cwRsync
以下这个链接是windows之间的csRsync和csRsyncServer同步教程: http://www.cnblogs.com/wwufengg/p/rsync-config.html !Att ...

css3小叮当（转载）

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

随机推荐

热门专题