超可爱纯CSS3实现的小猪、小老鼠、小牛

<span style="font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif; background-color: rgb(255, 255, 255);">利用纯</span><a target=_blank href="http://www.html5cn.org/portal.php?mod=list&catid=16" target="_blank" class="relatedlink" style="font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif; word-wrap: break-word; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: blue; color: rgb(68, 68, 68) !important; text-decoration: none !important; background-color: rgb(255, 255, 255);">CSS3</a><span style="font-family: 微软雅黑, Tahoma, Helvetica, SimSun, sans-serif; background-color: rgb(255, 255, 255);">绘制一些人物、动物、风景已经不是一件新鲜的事情了，主要是利用CSS3可以让直线变成任意的曲线，于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享一下超级可爱的纯CSS3实现的小猪、小老鼠、小牛，先看靓照：</span>

我们可以在这里查看这三个小动物的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: 0;height: 0;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: 0;height: 0;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: 0;height: 0;position: absolute;top: 110px;left: 75px;border-left: 25px solid transparent;border-right: 25px solid transparent;border-top: 50px solid #6E6E6E;z-index: 1;
}#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粉红猪小猪佩奇代码
下载地址这就是风靡全球的粉红猪小妹叫佩奇,之前看过别人用Canvas画布来实现的,主要就是css3的边框曲度来写. dd:
纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
css3控制html中图片,精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢今天我们要分享一个利用纯C ...
纯 CSS3 卡通小火车行驶动画
自从CSS3流行以来,基于纯CSS3的动画就层出不穷,有纯CSS3的人物动画.纯CSS3按钮动画等.这次,我们给大家分享一个很不错的CSS3卡通火车沿轨道行驶动画,一辆卡通样式的火车缓缓驰过,特别是火 ...
炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
html页面小宠物代码大全,纯css3实现宠物小鸡实例代码
最近看了很多关于css3的知识和文章,觉得css3用起来很方便,使用css3的话,在页面布局上可以省去很多不必要的代码.所以最近用css3仿写了我每天都照顾的宠物小鸡的模样,第一次写,有些细节处理的不 ...
纯html css动画效果,8个超震撼的HTML5和纯CSS3动画源码
本文作者html5tricks,转载请注明出处 1.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比 ...

超可爱纯CSS3实现的小猪、小老鼠、小牛

超可爱纯CSS3实现的小猪、小老鼠、小牛相关推荐

最新文章

热门文章

超可爱 纯CSS3实现的小猪、小老鼠、小牛

超可爱 纯CSS3实现的小猪、小老鼠、小牛相关推荐

最新文章

热门文章

超可爱纯CSS3实现的小猪、小老鼠、小牛

超可爱纯CSS3实现的小猪、小老鼠、小牛相关推荐