通过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 方法 ...
随机推荐
- yii2-basic后台管理功能开发之四：图片上传FileInput
我采用的是 kartik-v/yii2-widget-fileinput的文件上传插件,大家可以去github查看详细的安装方法和使用说明. 需求:上传图片+可以预览缩略图 在这里说说我碰到的问题:限 ...
- tsql语句分析工具 转
一款好用且免费的语句分析工具 在调优过程中的查询语句优化阶段,分析语句的执行计划是必经之路,一款好的执行计划分析工具确实可以帮助我们事半功倍 一款名为“Plan Explorer“,自己用的挺爽,不私 ...
- Nodejs express中创建ejs项目,解决express下默认创建jade,无法创建ejs问题
最近在看<Node.js开发指南>,看到使用nodejs进行web开发的时候,准备创建ejs项目遇到问题了, 书上命令为: express -t ejs microblog 可是执行后,仍 ...
- smartform
SMARTFORMS中一般对于固定样式,格式的某一块会选择使用TEMPLATE或者TABLE. 表:上下高度不限,以窗口高度为限.循环输出表数据,每次循环都会按照表行输出,表头和表尾可控制输出.表行中 ...
- 编译GCC4.8.2
公司的机器上默认是GCC4.4.6,为了完整的体验C++11,可以自己编译一个GCC4.8.2出来(自带了更高版本的glibc). 以下是备忘. 1.下载GCC源码以及依赖库 gmp ftp: ...
- 大数的除法 不使用BigInteger Java实现
import java.util.Arrays; public class Solution { public void div(String a, String b) { char[] chara ...
- 四步完成NodeJS安装,配置和测试
四步完成NodeJS安装,配置和测试 NodeJS 官网地址: http://nodejs.org/ 第一步:在官网点击 ’ INSTALL ’,下载相应的版本(我的机器是Win7专业版 64bit) ...
- HttpServletResponse常用的方法
所有Servlet响应都实现ServletResponse接口.ServletResponse接口主要有以下方法: (1)从Servlet中可以通过getWriter方法取得PrintWriter对象 ...
- 微信支付报错:Invalid thumbnail dimensions: 0x0
微信支付的 android 端在支付的时候闪退, 调试信息: 10-08 10:17:08.459 2127-3946/? E/ActivityManager: Invalid thumbnail d ...
- 项目中踩过的坑之-sessionStorage
总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...