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- ...
随机推荐
- 30.es增删改内部分发原理
当客户端发送一次请求时,大致会经过以下几个步骤 (1)客户端发送一个请求过去,es的一个node接收到这个请求(随机的),这个node就被es内部分配成coordinating node(协调 ...
- Spring Cloud系列（二） 介绍
Spring Cloud系列(一) 介绍 Spring Cloud是基于Spring Boot实现的微服务架构开发工具.它为微服务架构中涉及的配置管理.服务治理.断路器.智能路由.微代理.控制总线.全 ...
- vscode简单使用介绍及个人常用扩展插件
vscode全称Visual Studio Code 是微软开发一款IDE,官方地址 vscode 作为一款前端编辑器功能很强大,灵活,可以根据个人喜好选择扩展插件,而且还支持多种开发语言, 关于v ...
- BZOJ 1101 Luogu P3455 POI 2007 Zap (莫比乌斯反演+数论分块)
手动博客搬家: 本文发表于20171216 13:34:20, 原地址https://blog.csdn.net/suncongbo/article/details/78819470 URL: (Lu ...
- 从编程的角度理解gradle脚本﹘﹘Android Studio脚本构建和编程[魅族Degao]
本篇文章由嵌入式企鹅圈原创团队.魅族资深project师degao撰写. 随着Android 开发环境从Eclipse转向Android Studio,我们每一个人都開始或多或少要接触gradle脚本 ...
- Database Design for Sexbale Forum
Mars March 17, 2015
- iWatch报错: Authorization request cancled
iWatch报错: Optional (Error Domin = com.apple.healthkit Code = 5 "Autherization request canceled& ...
- 三期_day06_登录和找回password
登录思路: 前台发送一个请求,然后通过spring的自己主动注參注入username和password,将password加密后与数据库中查找的做比較.返回是否通过. 这里还使用了EasyUI的校 ...
- android 构建GPS Provide步骤及信息
构建GPS Provide步骤及信息 1. 用GPS2GoogleEarth录制KML文件 2. KML文件 2.1 经纬度解析 <LineString> <coordina ...
- 利用Powershell和ceye.io实现Windows账户密码回传
利用Powershell和ceye.io实现Windows账户密码回传 转自:http://www.freebuf.com/articles/system/129068.html 最近在研究Power ...