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>
<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小叮当（转载）的更多相关文章
- 转载——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- ...
随机推荐
- mysql 基础教程
创建数据库: CREATE DATABASE --DATABASE 或者 SCHEMA数据库集合 IF NOT EXISTS db_name CHARACTER SET utf8 COLLATE ut ...
- android 权限清单
常用权限: 读写存储卡装载和卸载文件系统 android.permission.WRITE_EXTERNAL_STORAGE android.permission.READ_EXTERNAL_STOR ...
- WordPress TinyMCE 编辑器增强技巧大全
说到WordPress自带的TinyMCE 编辑器,有些国人总是不太满意.针对这个情况,倡萌已经介绍了一些增强或替代的方法: WordPress编辑器增强插件:TinyMCE Advanced Wor ...
- BZOJ 1013 cogs 1845 [JSOI2008]球形空间产生器sphere
题目描述 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁这个球形空间产 ...
- 洛谷 P1198 BZOJ 1012 [JSOI2008]最大数
题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...
- 第五节、矩阵分解之LU分解
一.A的LU分解:A=LU 我们之前探讨过矩阵消元,当时我们通过EA=U将A消元得到了U,这一节,我们从另一个角度分析A与U的关系 假设A是非奇异矩阵且消元过程中没有行交换,我们便可以将矩阵消元的EA ...
- Spring bean生命周期(一)
当容器销毁的时候,先调用DisposableBean实现类的destroy()方法,在调destory-method方法.
- Anton and Letters
Anton and Letters time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- const指针总结
const 总结: 假设keywordconst出如今星号左边.表示被指物是常量:即不能通过指针改动变量的值. 假设keywordconst出如今星号右边,表示指针自身是常量:即不能改变指针的指向. ...
- 什么是A记录、MX记录、CNAME记录具体介绍
什么是A记录: A (Address) 记录是用来指定主机名(或域名)相应的IP地址记录.用户能够将该域名下的站点服务器指向到自己的web server上. 同一时候也能够设置域名的子域名. 通俗来说 ...