通过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 方法 ...
随机推荐
- django学习记录--第一个网页“hello django”
一.安装django 下面两种方法任选其一 1.pip或easy_install 安装 pip install django easy_install django 2.到django官网(https ...
- (44) odoo中的WebService
* 前言 erp系统会和其它系统进行对接,这时就要接口,官方给出的是两解决方案 * XML-RPCLibrary 举例 import xmlrpclib root = 'http:// ...
- 自己写的一个SqlHelper,感觉使用起来挺方便的
自己写的一个SqlHelper,感觉使用起来挺方便的 using System; using System.Data; using System.Collections.Generic; using ...
- WinForm 公共控件
一.窗体属性: 1.AcceptButton - 窗体的“接受”按钮.如果设置该属性,每次用户按“Enter”键都相当于“单击”了该按钮. 需要设置哪个键,就在后面选择. 2.CancelButton ...
- T4模板批量生成代码
大家通过比对下,就应该知道怎么玩. T4代码 <#@ template debug="false" hostspecific="true" languag ...
- python爬取数据保存入库
import urllib2 import re import MySQLdb class LatestTest: #初始化 def __init__(self): self.url="ht ...
- bzoj2006: [NOI2010]超级钢琴
题意:给一个序列(n<=500000),要求选定k个不同区间,使得区间长度在L,R之间,并使得k个区间和之和最大,输出这个最大值. 刚拿到题的时候想的是,对于每个点,如果以它开头,那么之后的L- ...
- CAST()函数
语法: CAST(expression AS data_type) 参数说明: expression:任何有效的SQServer表达式 AS:用于分割两个参数,在AS之前的是需要处理的数据,在AS之后 ...
- pthreads 2.0.10 test
CentOS 6.3 cd /root mkdir pthreads //get php-5.6 and install zts version wget cn2.php.net/get/php-5. ...
- LeetCode 3 Longest Substring Without Repeating Characters 区间,想法 难度:1
https://leetcode.com/problems/longest-substring-without-repeating-characters/ 思路:从某点结束所能取到的最早开头是到目前出 ...