通过CSS实现小动物
此例演示的是通过CSS实现动物头像，效果如下：
好了，上代码：
html代码：
<html>
<head>
<meta charset="utf-8" />
<title>纯CSS3实现的小动物</title>
<link href="css/animal.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--
作者：luosijin123@163.com
时间：2014-04-28
描述：小猪
-->
<div id="pig">
<div id="pig_head"></div>
<div id="pig_ear_left"></div>
<div id="pig_ear_right"></div>
<div id="pig_eye_left"></div>
<div id="pig_eye_right"></div>
<div id="pig_snout"></div>
<div id="pig_snout_hole_left"></div>
<div id="pig_snout_hole_right"></div>
</div>
<!--
作者：luosijin123@163.com
时间：2014-04-28
描述：小老鼠
-->
<div id="mouse">
<div id="mouse_head"></div>
<div id="mouse_ear_left"></div>
<div id="mouse_ear_right"></div>
<div id="mouse_eye_left"></div>
<div id="mouse_eye_right"></div>
<div id="mouse_eye_inner_left"></div>
<div id="mouse_eye_inner_right"></div>
<div id="mouse_nose"></div>
<div id="mouse_whisher_left_1"></div>
<div id="mouse_whisher_left_2"></div>
<div id="mouse_whisher_left_3"></div>
<div id="mouse_whisher_right_1"></div>
<div id="mouse_whisher_right_2"></div>
<div id="mouse_whisher_right_3"></div>
<div id="mouse_tooth_left"></div>
<div id="mouse_tooth_right"></div>
</div>
<!--
作者：luosijin123@163.com
时间：2014-04-28
描述：小牛
-->
<div id="cow">
<div id="cow_head"></div>
<div id="cow_horn_left"></div>
<div id="cow_horn_right"></div>
<div id="cow_eye_left"></div>
<div id="cow_eye_right"></div>
<div id="cow_eye_inner_left"></div>
<div id="cow_eye_inner_right"></div>
<div id="cow_snout"></div>
<div id="cow_snout_hole_left"></div>
<div id="cow_snout_hole_right"></div>
<div id="cow_mouth"></div>
<div id="cow_grass_1"></div>
<div id="cow_grass_2"></div>
<div id="cow_grass_3"></div>
<div id="cow_grass_4"></div>
<div id="cow_grass_5"></div>
<div id="cow_grass_6"></div>
<div id="cow_grass_7"></div>
<div id="cow_grass_8"></div>
<div id="cow_grass_9"></div>
<div id="cow_spot_1"></div>
<div id="cow_spot_2"></div>
<div id="cow_spot_3"></div>
<div id="cow_spot_4"></div>
<div id="cow_spot_5"></div>
<div id="cow_spot_6"></div>
</div>
</body>
</html>
CSS代码：
body{
background-color: #474747;
}
#pig{
position: absolute;
top: 40px;
}
#pig_head{
width: 200px;
height: 200px;
background-color: #FA8CC8;
border-radius: 100px;
}
#pig_ear_left{
width:;
height:;
position: absolute;
top: 15px;
left: 18px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 28px solid #D30073;
-webkit-transform: rotate(-25deg);
}
#pig_ear_right{
width:;
height:;
position: absolute;
top: 15px;
right: 15px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 28px solid #D30073;
-webkit-transform: rotate(25deg);
}
#pig_eye_left{
position: absolute;
top: 50px;
left: 70px;
width: 12px;
height: 20px;
background: black;
-webkit-border-radius: 50px/100px;
}
#pig_eye_right{
position: absolute;
top: 50px;
right: 70px;
width: 12px;
height: 20px;
background: black;
-webkit-border-radius: 50px/100px;
}
#pig_snout {
position: absolute;
top: 90px;
left: 62px;
width: 80px;
height: 55px;
background: #FA4EAC;
-webkit-border-radius: 90px/60px;
}
#pig_snout_hole_left
{
position: absolute;
top: 100px;
left: 80px;
width: 17px;
height: 35px;
background: #E01B87;
-webkit-border-radius: 60px/100px;
}
#pig_snout_hole_right
{
position: absolute;
top: 100px;
right: 80px;
width: 17px;
height: 35px;
background: #E01B87;
-webkit-border-radius: 60px/100px;
}
#mouse
{
position: absolute;
top: 40px;
left: 280px;
}
#mouse_head
{
width: 200px;
height: 200px;
background: #8F9595;
border-radius: 100px;
}
#mouse_ear_left
{
display: inline-block;
position: relative;
top: -230px;
left: -25px;
border:12px solid #6E6E6E;
width: 75px;
height: 75px;
background: #E5A95F;
border-radius: 50%;
}
#mouse_ear_right
{
display: inline-block;
position: relative;
top: -230px;
left:25px;
border: 12px solid #6E6E6E;
width: 75px;
height: 75px;
background: #E5A95F;
border-radius: 50%;
}
#mouse_eye_left
{
top: 55px;
width: 40px;
height: 40px;
position: absolute;
left: 50px;
background: white;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#mouse_eye_right
{
top:55px;
width: 40px;
height: 40px;
position: absolute;
right: 50px;
background: white;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#mouse_eye_inner_left
{
top: 75px;
left: 63px;
width: 15px;
height: 15px;
position: absolute;
background: black;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#mouse_eye_inner_right
{
top: 75px;
right: 63px;
width: 15px;
height:15px;
position: absolute;
background: black;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#mouse_nose
{
width:;
height:;
position: absolute;
top: 110px;
left: 75px;
border-left:25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid #6E6E6E;
z-index:;
}
#mouse_whisher_left_1
{
top: 115px;
left:25px;
position: absolute;
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
-webkit-transform: rotate(10deg);
}
#mouse_whisher_left_2
{
top: 118px;
left:28px;
position: absolute;
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
}
#mouse_whisher_left_3
{
top: 120px;
left:25px;
position: absolute;
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
-webkit-transform: rotate(-10deg);
}
#mouse_whisher_right_1
{
top:115px;
right:25px;
position: absolute;
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
-webkit-transform: rotate(-10deg);
}
#mouse_whisher_right_2
{
top: 118px;
right: 28px;
position:absolute;
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
}
#mouse_whisher_right_3
{
top: 121px;
right: 25px;
position: absolute;
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
-webkit-transform: rotate(10deg);
}
#mouse_tooth_left
{
top: 170px;
left:84px;
position: absolute;
width: 15px;
height: 22px;
background-color: white;
-webkit-transform: rotate(10deg);
}
#mouse_tooth_right
{
top: 170px;
left:102px;
position: absolute;
width: 15px;
height: 22px;
background-color: white;
-webkit-transform: rotate(-10deg);
}
#cow
{
position: absolute;
top: 40px;
left: 550px;
}
#cow_head
{
width: 200px;
height: 200px;
background-color: white;
border-radius: 100px;
}
#cow_horn_left
{
width: 20px;
height: 40px;
background-color: black;
border-radius: 8px 8px 2px 2px;
position: absolute;
top: 2px;
left:18px;
-webkit-transform: rotate(-35deg);
}
#cow_horn_right
{
position: absolute;
top: 2px;
right: 18px;
width: 20px;
height: 40px;
background-color: black;
border-radius: 8px 8px 2px 2px;
-webkit-transform: rotate(35deg);
}
#cow_snout
{
position: absolute;
}
#cow_eye_left
{
top: 40px;
width: 40px;
height: 40px;
position: absolute;
left: 50px;
background: white;
border:1px solid black;
border-radius: 50px;
}
#cow_eye_right
{
top: 40px;
width: 40px;
height: 40px;
position: absolute;
right: 50px;
background: white;
border:1px solid black;
border-radius: 50px;
}
#cow_eye_inner_left
{
top: 60px;
left: 63px;
width: 15px;
height: 15px;
position: absolute;
background: black;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#cow_eye_inner_right
{
top: 60px;
right: 63px;
width: 15px;
height:15px;
position: absolute;
background: black;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#cow_snout {
position: absolute;
top: 90px;
left: 62px;
width: 80px;
height: 55px;
background: #E5A95F;
-webkit-border-radius: 90px/60px;
}
#cow_snout_hole_left
{
position: absolute;
top: 100px;
left: 80px;
width: 17px;
height: 35px;
background: #8C6A3F;
-webkit-border-radius: 60px/100px;
}
#cow_snout_hole_right
{
position: absolute;
top: 100px;
right: 80px;
width: 17px;
height: 35px;
background: #8C6A3F;
-webkit-border-radius: 60px/100px;
}
#cow_mouth
{
position: absolute;
top: 160px;
left: 110px;
background: white;
width: 45px;
height: 15px;
border: 1px solid black;
border-radius: 50px;
}
#cow_grass_1
{
position: absolute;
top: 200px;
left: 125px;
background-color: #399200;
width: 80px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(60deg);
}
#cow_grass_2
{
position: absolute;
top: 200px;
left: 105px;
background-color: #399200;
width: 80px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(-120deg);
}
#cow_grass_3
{
position: absolute;
top: 197px;
left: 85px;
background-color: #399200;
width: 80px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(90deg);
}
#cow_grass_4
{
position: absolute;
top: 197px;
left: 100px;
background-color: #399200;
width: 80px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(80deg);
}
#cow_grass_5
{
position: absolute;
top: 197px;
left: 100px;
background-color: #399200;
width: 80px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(100deg);
}
#cow_grass_6
{
position: absolute;
top: 197px;
left: 70px;
background-color: #399200;
width: 80px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(100deg);
}
#cow_grass_7
{
position: absolute;
top: 180px;
left: 100px;
background-color: #5CBA20;
width: 40px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(100deg);
}
#cow_grass_8
{
position: absolute;
top: 180px;
left: 120px;
background-color: #5CBA20;
width: 40px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(90deg);
}
#cow_grass_9
{
position: absolute;
top: 178px;
left: 120px;
background-color: #5CBA20;
width: 40px;
height: 10px;
border-radius: 3px;
-webkit-transform: rotate(50deg);
}
#cow_spot_1{
position: absolute;
top: 1px;
left: 100px;
background-color: black;
width: 35px;
height: 35px;
border-radius: 50px;
}
#cow_spot_2{
position: absolute;
top: -11px;
left: 95px;
background-color: black;
width: 20px;
height: 40px;
border-radius: 50px;
-webkit-transform: rotate(85deg);
}
#cow_spot_3{
position: absolute;
top: 75px;
left: -1px;
background-color: black;
width: 50px;
height: 50px;
border-radius: 50px;
}
#cow_spot_4{
position: absolute;
top: 81px;
background-color: black;
width: 15px;
height: 15px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#cow_spot_5{
position: absolute;
top: 95px;
left: -10px;
background-color: black;
width: 55px;
height: 35px;
-webkit-transform: rotate(80deg);
border-radius: 50px;
}
#cow_spot_6{
position: absolute;
top: 95px;
left: 170px;
background-color: black;
width: 35px;
height: 25px;
-webkit-transform: rotate(-80deg);
border-radius: 50px;
}
通过CSS实现小动物的更多相关文章
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- 一些常用的html/CSS效果---小技巧
我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- 第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- 通过css实现小三角形
下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- zzulioj--1801--xue姐的小动物(水题)
1801: xue姐的小动物 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 594 Solved: 168 SubmitStatusWeb Boar ...
- web 前端2 html css一些小问题技巧
html css一些小问题技巧 1 对于儿子块float后,父亲块如果没内容就不见了,如何让父亲块依然跟随飘起了的儿子块撑起来呢?? 用到的属性after方法 公共方法作为继承即可. 1.1 方法 ...
随机推荐
- JavaScript查找数组是否存在指定元素
利用JavaScript的函数有两种方式 1.jQuery jQuery.inArray( value, array [, fromIndex ] ) value 类型: Anything 要查找的值 ...
- yum源安装Mysql
Mysql版本:5.7 进入mysql官网,复制下载链接 步骤: (1) wget http://dev.mysql.com/get/mysql57-community-release-el6-9. ...
- JAVA04类与对象之课后问题解决
1.验证ClassAndObjectTest.java(使用自定义类) public class ClassAndObjectTest { public static void main(String ...
- 初始通过 FastClick.notNeeded 方法判断是否需要做后续相关处理
其实前面几篇文章大家都遇到一些错误,很多时候呢,我并没有直接回复解决方案,不是LZ不想告诉大家,如果不想那就不写这个了,估计博客园啊CSDN啊那么多写博客的,很少有人把现用框架分享出来,既然分享就毫不 ...
- hdu 5929 Basic Data Structure
ゲート 分析: 这题看出来的地方就是这个是左结合的,不适用结合律,交换律. 所以想每次维护答案就不怎么可能了.比赛的时候一开始看成了异或,重读一遍题目了以后就一直去想了怎么维护答案...... 但是很 ...
- 用 highlight.js 为文章中的代码添加语法高亮
来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...
- 安卓xml文件中常见的问题
1.EditText显示不完全
- javascript无线端的判断
经常在工作中要求网页做这样的处理判断:针对无线端的网页,我们需要兼容一种异于PC端的网页效果. 如下代码就可以实现无线端的判断: var mobs = ['android', 'ipad', 'ipo ...
- C语言模块化编译介绍
C语言模块化编译介绍 模块化编程的概念 所谓模块化变成(多文件开发),就是多文件(.c文件)编程,一个.c文件和一个.h文件可以被称为一个模块. 头文件开发的注意事项: 1)头文件中可以和C程序一样引 ...
- 《企业应用架构模式》（POEAA）读书笔记
原文地址:<企业应用架构模式>(POEAA)读书笔记作者:邹齐龙(技术-5013 什么是架构 Rolph Johnson认为:架构是一种主观上的东西,是专家级的项目开发人员对系统设计的一些 ...