超可爱 纯CSS3实现的小猪、小老鼠、小牛
利用纯CSS3绘制一些人物、动物、风景已经不是一件新鲜的事情了，主要是利用CSS3可以让直线变成任意的曲线，于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享一下超级可爱的纯CSS3实现的小猪、小老鼠、小牛，先看靓照：
我们可以在这里查看这三个小动物的DEMO演示。
接下来我们逐个来贴出实现这三个小动物的CSS代码
一、小猪
HTML代码：
<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>
CSS代码：
#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;
left: 145px;
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;
left: 125px;
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;
left: 111px;
width: 17px;
height: 35px;
background: #E01B87;
-webkit-border-radius: 60px/100px;
}
二、小老鼠
HTML代码：
<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_outer"></div>
<div id="mouse_eye_right_outer"></div>
<div id="mouse_eye_left_inner"></div>
<div id="mouse_eye_right_inner"></div> <div id="mouse_nose"></div> <div id="mouse_whisker_left_1"></div>
<div id="mouse_whisker_left_2"></div>
<div id="mouse_whisker_left_3"></div>
<div id="mouse_whisker_right_1"></div>
<div id="mouse_whisker_right_2"></div>
<div id="mouse_whisker_right_3"></div> <div id="mouse_tooth_left"></div>
<div id="mouse_tooth_right"></div> </div>
CSS代码：
#mouse{
position: absolute;
top: 40px;
left: 280px;
}
#mouse_head {
width: 200px;
height: 200px;
background-color: #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_outer {
width: 40px;
height: 40px;
position: absolute;
top: 55px;
left: 50px;
background: white;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#mouse_eye_right_outer {
width: 40px;
height: 40px;
position: absolute;
top: 55px;
left: 110px;
background: white;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#mouse_eye_left_inner {
width: 15px;
height: 15px;
position: absolute;
top: 75px;
left: 63px;
background: black;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#mouse_eye_right_inner {
width: 15px;
height: 15px;
position: absolute;
top: 75px;
left: 122px;
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_whisker_left_1 {
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
position: absolute;
top: 115px;
left: 25px;
-webkit-transform: rotate(10deg);
}
#mouse_whisker_left_2 {
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
position: absolute;
top: 118px;
left: 28px;
}
#mouse_whisker_left_3 {
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
position: absolute;
top: 120px;
left: 25px;
-webkit-transform: rotate(-10deg);
}
#mouse_whisker_right_1 {
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
position: absolute;
top: 115px;
left: 90px;
-webkit-transform: rotate(-10deg);
}
#mouse_whisker_right_2 {
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
position: absolute;
top: 118px;
left: 90px;
}
#mouse_whisker_right_3 {
width: 80px;
height: 1.5px;
border-radius: 2px;
background-color: black;
position: absolute;
top: 121px;
left: 92px;
-webkit-transform: rotate(10deg);
}
#mouse_tooth_left {
width: 15px;
height: 22px;
background-color: white;
position: absolute;
top: 170px;
left: 84px;
-webkit-transform: rotate(10deg);
}
#mouse_tooth_right {
width: 15px;
height: 22px;
background-color: white;
position: absolute;
top: 170px;
left: 102px;
-webkit-transform: rotate(-10deg);
}
三、小牛
HTML代码：
<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_outer"></div>
<div id="cow_eye_right_outer"></div>
<div id="cow_eye_left_inner"></div>
<div id="cow_eye_right_inner"></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>
CSS代码：
#cow {
position: absolute;
top: 40px;
left: 550px;
}
#cow_head {
width: 200px;
height: 200px;
background-color: white;
border-radius: 100px;
}
#cow_snout {
position: absolute;
top: 90px;
left: 63px;
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;
left: 111px;
width: 17px;
height: 35px;
background: #8C6A3F;
-webkit-border-radius: 60px/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 {
width: 20px;
height: 40px;
background-color: black;
border-radius: 8px 8px 2px 2px;
position: absolute;
top: 2px;
left: 162px;
-webkit-transform: rotate(35deg);
}
#cow_eye_left_outer {
width: 40px;
height: 40px;
position: absolute;
top: 40px;
left: 50px;
background: white;
border: 1px solid black;
border-radius: 50px;
}
#cow_eye_right_outer {
width: 40px;
height: 40px;
position: absolute;
top: 40px;
left: 110px;
background: white;
border: 1px solid black;
border-radius: 50px;
}
#cow_eye_left_inner {
width: 15px;
height: 15px;
position: absolute;
top: 60px;
left: 63px;
background: black;
border-radius: 50px;
}
#cow_eye_right_inner {
width: 15px;
height: 15px;
position: absolute;
top: 60px;
left: 122px;
background: black;
border-radius: 50px;
}
#cow_mouth {
width: 45px;
height: 15px;
position: absolute;
top: 160px;
left: 110px;
background: white;
border: 1px solid black;
border-radius: 50px;
}
#cow_grass_1 {
width: 80px;
height: 10px;
position: absolute;
top: 200px;
left: 125px;
border-radius: 3px;
-webkit-transform: rotate(60deg);
background-color: #399200;
}
#cow_grass_2 {
width: 80px;
height: 10px;
position: absolute;
top: 200px;
left: 105px;
border-radius: 3px;
-webkit-transform: rotate(-120deg);
background-color: #399200;
}
#cow_grass_3 {
width: 80px;
height: 10px;
position: absolute;
top: 197px;
left: 85px;
border-radius: 3px;
-webkit-transform: rotate(90deg);
background-color: #399200;
}
#cow_grass_4 {
width: 80px;
height: 10px;
position: absolute;
top: 197px;
left: 100px;
border-radius: 3px;
-webkit-transform: rotate(80deg);
background-color: #399200;
}
#cow_grass_5 {
width: 80px;
height: 10px;
position: absolute;
top: 197px;
left: 100px;
border-radius: 3px;
-webkit-transform: rotate(100deg);
background-color: #399200;
}
#cow_grass_6 {
width: 80px;
height: 10px;
position: absolute;
top: 197px;
left: 70px;
border-radius: 3px;
-webkit-transform: rotate(100deg);
background-color: #399200;
}
#cow_grass_7 {
width: 40px;
height: 10px;
position: absolute;
top: 180px;
left: 100px;
border-radius: 3px;
-webkit-transform: rotate(100deg);
background-color: #5CBA20;
}
#cow_grass_8 {
width: 40px;
height: 10px;
position: absolute;
top: 180px;
left: 120px;
border-radius: 3px;
-webkit-transform: rotate(90deg);
background-color: #5CBA20;
}
#cow_grass_9 {
width: 40px;
height: 10px;
position: absolute;
top: 178px;
left: 120px;
border-radius: 3px;
-webkit-transform: rotate(50deg);
background-color: #5CBA20;
}
#cow_spot_1 {
width: 35px;
height: 35px;
position: absolute;
top: 1px;
left: 100px;
background-color: black;
border-radius: 50px;
}
#cow_spot_2 {
width: 20px;
height: 40px;
position: absolute;
top: -11px;
left: 95px;
background-color: black;
border-radius: 50px;
-webkit-transform: rotate(85deg);
}
#cow_spot_3 {
width: 50px;
height: 50px;
position: absolute;
top: 75px;
left: -1px;
background-color: black;
border-radius: 50px;
}
#cow_spot_4 {
width: 15px;
height: 15px;
position: absolute;
top: 81px;
background-color: black;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#cow_spot_5 {
width: 55px;
height: 35px;
position: absolute;
top: 95px;
left: -10px;
background-color: black;
border-radius: 50px;
-webkit-transform: rotate(80deg);
}
#cow_spot_6 {
width: 35px;
height: 25px;
position: absolute;
top: 95px;
left: 170px;
background-color: black;
border-radius: 50px;
-webkit-transform: rotate(-80deg);
}
最后分享一下源代码，下载地址>>
超可爱 纯CSS3实现的小猪、小老鼠、小牛的更多相关文章
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 利用纯CSS3实现超立体的3D图片侧翻倾斜效果
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
- 8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
- 11个超震撼的HTML5和纯CSS3动画源码
1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
- 一款纯css3实现的超炫3D表单
今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
随机推荐
- Red Gate系列之七 SQL Search 1.1.6.1 Edition SQL查询分析工具使用教程
原文:Red Gate系列之七 SQL Search 1.1.6.1 Edition SQL查询分析工具使用教程 Red Gate系列之七 SQL Search 1.1.6.1 Edition SQL ...
- Blend4精选案例图解教程（一）：丰富的形状（Shape）资源
原文:Blend4精选案例图解教程(一):丰富的形状(Shape)资源 Blend4资源面板中内置了丰富的形状素材,为我们在构建程序时提供极大的方便.系统默认内置18种常用形状,通过其属性设置可以自定 ...
- 阿里游戏大数据sesson2_RF&GBRT（上）
----------一个小的游戏体验,对于不太熟悉Xlab RF和GBRT同学们都叫参考,不喜勿喷,大神绕道,米姆达. . .. .---------- 6月初的时候LR 做到4.9后一直上不去,看群 ...
- Hive自己定义函数的使用——useragent解析
想要从日志数据中分析一下操作系统.浏览器.版本号使用情况.可是hive中的函数不能直接解析useragent,于是能够写一个UDF来解析.useragent用于表示用户的当前操作系统,浏览器版本号信息 ...
- node.js基础：数据存储
无服务器的数据存储 内存存储 var http = require('http'); var count = 0; //服务器访问次数存储在内存中 http.createServer(function ...
- .NET读写Excel工具Spire.Xls使用(1)入门介绍
原文:[原创].NET读写Excel工具Spire.Xls使用(1)入门介绍 在.NET平台,操作Excel文件是一个非常常用的需求,目前比较常规的方法有以下几种: 1.Office Com组件的方式 ...
- 利用Eclipse中的Maven构建Web项目（三）
利用Eclipse中的Maven构建Web项目 1.将Maven Project转换成动态Web项目,鼠标右键项目,输入"Project Facets" 2.依据Dynamic W ...
- Cocos2d-x-Lua 开发一个简单的游戏（记数字步进白色块状）
Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...
- 综合第一篇文章(带钩Quora)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDc4MzAyNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- 又一次认识HTML，CSS，Javascript 之node-webkit 初探
今天我们来系统的.全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来. 什么是HTML? HTML 是用来描写叙述网页的一种语言. HTML 包括一些根节点.子节点,文本节点.属性 ...