通过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 方法 ...
随机推荐
- mysql数据库的导入导出
当我们在操作数据库的时候,难免会遇到数据导入导出的一些操作,今天突然学到了这个知识点,特意来给大家分享. 我用的是data的这条数据 1.使用数据 mysql> use data; Databa ...
- web.config 修改数据库连接
<connectionstrings> </database=数据库名字 ;uid = 登录数据库的名字;Password = 登录数据库的密码;/> </connect ...
- RMAN 参数详解
使用RMAN>show all;可以显示出RMAN 配置参数为: CONFIGURE RETENTION POLICY TO REDUNDANCY 1; # defaultCONFIGURE B ...
- 简化版c语言文法
<程序> → <外部声明> | <程序的外部声明> <标识符类型> → <无类型> | <字符> | <整型> | ...
- EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(三)
前言 在上一篇中,我们依靠着EasyUI强大的前端布局特性把前端登录界面和主界面给搭建完成了.这一篇我们就要尝试着把整个解决方案部署到云端呢,也就是Visual Studio Online(TFVC) ...
- （转）spring boot注解 --@EnableAsync 异步调用
原文:http://www.cnblogs.com/azhqiang/p/5609615.html EnableAsync注解的意思是可以异步执行,就是开启多线程的意思.可以标注在方法.类上. @Co ...
- CentOS 6中MATLAB print函数“所见非所得”bug的解决方案
0 系统配置+软件版本 主机:Dell optiplex 390 MT (i5) 系统+软件:CentOS 6.5 x64, Matlab R2012, R2013 系统+软件:CentOS 6.7 ...
- react验证码倒计时
<!DOCTYPE html> <html> <head> <script src="../build/react.js">< ...
- 列王的纷争，COK，675区，有去的没有？加群：159108918，盟的名字准备叫：大话西游
首先我承认我玩物丧志了 679区,有去的没有?加群: 474574809,盟的名字叫:Moon Box 如何练最强5级号,为新区做准备?! 粮食是可以为0的,士兵不会死,这是关键之一. 关键之二是新手 ...
- Git-rebase 小笔记
转自: https://blog.yorkxin.org/posts/2011/07/29/git-rebase/ 最近刚好有个机会整理很乱的Git commit tree,终于搞懂了rebase 的 ...