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

原文:超可爱纯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: 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);
}

最后分享一下源代码，下载地址>>

时间： 2024-07-30 19:32:31

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

利用纯CSS3实现超立体的3D图片侧翻倾斜效果

原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图. 如何,看上去挺不错吧,倾斜.阴影,让一张很普通的图片变得如此霸气. 另外你也可以在这里查看DEMO演示,鼠标滑过图片时会出现这样的效果. 那么接下来我们分析一下源码吧,显示html代码,非常简单: <div onclick=""> <figur

纯CSS3画出小黄人并实现动画效果

前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,

纯CSS3实现自定义涂鸦风格的边框

今天我们要来分享一款基于纯CSS3的自定义边框应用,看上去它像一个Tooltip控件,因为下边框有一个小三角,就像很多地方的引用文本框一样.另外这款CSS3边框是涂鸦风格的,看起来很有个性.用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小. 你也可以在这里查看在线演示下面我们来分享一下实现的方法,主要由HTML代码和CSS代码组成. HTML代码: <div> <div> <div>CSS3简单实现涂鸦风格边框 Welcome to</div&g

纯CSS3彩色边线3D立体按钮制作教程

今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示效果,而且我们把制作教程也分享出来,首先来看看效果图: 我们也可以在这里看到这些按钮的DEMO演示. 接下来就来分享一下制作教程以及源代码,按钮的源代码主要由HTML和CSS两部分代码组成,先来看看HTML代码: <button class="blue"> <div class="wrapper&q

纯CSS3透明水晶盒

相信大家有看过这个例子:3D盒子,在书<CSS3 实战>上第282页有个综合实战"设计动态立体盒子"的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改.优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个: 投影镜像,让盒子的立体感更强烈: 边角线的处理,让盒子面与面之间过渡和谐. 你可以点击这里下载源代码(只是写了moz下的效果,we

Photoshop教程：绘制超可爱的猫猫

教程 ·Photoshop教程:绘制超可爱的猫猫(1) 猫猫真的是非常可爱哦,可惜我家里没养,好想养一只,但没时间照顾它怕对不起它.怕它孤单.怕它饿着了.怕它不快乐.不过等有时间了一定养一只~~~跑题了,下面看一下已经画好的效果吧^_^ 很可爱吧~~~什么时候我一定要养一只(又跑题了,检讨,我检讨-)这是用数位板直接在PS中画的,主要是真实的表现猫猫的神态和毛的质感. 画画的技巧汇总: 1.画的时候经常会调节画笔的大小和透明度,快捷的操作方法是按Ctrl+"["缩小画笔按Ctr

纯CSS3打造七巧板

原文:纯CSS3打造七巧板最近项目上要制作一个七巧板,脑子里瞬间闪现,什么...七巧板不是小时候玩的吗... 七巧板的由来先来个科普吧,是我在查资料过程中看到的,感觉很有意思. 宋朝有个叫黄伯思的人,对几何图形很有研究,他热情好客,发明了一种用6张小桌子组成的"宴几"--请客吃饭的小桌子.后来有人把它改进为7张桌组成的宴几,可以根据吃饭人数的不同,把桌子拼成不同的形状,比如3人拼成三角形,4人拼成四方形,6人拼成六方形--这样用餐时人人方便,气氛更好.后来,有人把宴几缩小改变到只有

纯CSS3实现的Tab选项卡三个实例分享

实例一: 下面我们一起看看用纯CSS来制作一个选项卡的方法.使用纯CSS3来制作Tab的好处除了不需要使用jQuery外,还支持添加一些细微的CSS3交互,使Tab展示效果不错. 代码这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容.具体请看下面代码. 关于兼容性,因为是用CSS3来制作的,所以如果不支持CSS3的浏览将会出现不兼容的情况. HTML代码 <ul class="tabs">

超可爱电池插件沐浴中的小猫试用

沐浴中的小猫(BathingCat)是一款超可爱的桌面电池插件,用户可以与小猫互动,给它喂奶.喂猫粮.洗澡等等,小猫及澡盆的样子有多重选择.最关键的是,用户可以通过这款电池插件随时了解手机的剩余电量以及电池温度等情况.评测环境安装及使用沐浴中的小猫是一款桌面插件类应用,用户安装完之后需要添加桌面插件来使用.在应用列表中也可以看到沐浴中的小猫的图标,不过打开之后只是提示用户添加桌面插件的方法:在桌面长按并选择添加小插件-BathingCat即可,插件会占用2x1面积的桌面空间.首先要添加桌面插件(

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

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

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

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