通过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 方法 ...
随机推荐
- ExtJS自制表格Grid分页条
试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...
- js制作简单的计算器
学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...
- loadrunner实现excel文件导出操作
项目中需要对“商品信息”进行查询及导出,但是loadrunner并不能录制到“保存”这一操作. 项目介绍:flex+Http协议: 不能录制的原因: 在我们点击了“导出”按钮后,服务端已经生成一份我们 ...
- java 的 linq，不要再写令人讨厌的 for 了！
package com.ly.linq; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator ...
- C/C++面试题总结
腾讯阿里面试题总结:1. 多态机制2. 排序算法(快排.堆排)3. 程序内存分配4. unix多线程5. 哈希查找6. oop特点7. 素数(优化)8. 字符串掩膜操作(内存紧凑)9. 多边形相交10 ...
- 安装MySQL（简便）
1.在本地虚拟机上上传mysql的5个安装包 2.查看opt目录下是否有这5个安装包 yum install /var/opt/mysql-community-* -y //安装MySQL syste ...
- CSS设置DIV背景色渐变
div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...
- MVC5 + EF6 完整入门教程三：EF来了
期待已久的EF终于来了 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型,将之前的示例添加数据库查询验证功能. 文章提纲 概述 & ...
- 几种jQuery 实现无限滚动的插件
1.EndLess Scroll 2.infinite-scroll插件的使用
- 在RichFaces中使用Facelets模板
在RichFaces中使用Facelets模板 目录 Facelets简介 Facelets标签 创建相应文件 Facelets简介 Facelets是用来构建JSF应用程序的默认视图技术.它为表现层 ...