超可爱 纯CSS3实现的小猪、小老鼠、小牛
利用纯CSS3绘制一些人物、动物、风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享一下超级可爱的纯CSS3实现的小猪、小老鼠、小牛,先看靓照:
HTML代码:
CSS代码:
三、小牛
HTML代码:
我们可以在这里查看这三个小动物的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>
- #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>
- #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实现的小猪、小老鼠、小牛】相关文章
7. 纯CSS3实现圆角按钮
8. Cufon, jQuery和CSS3实现的超强飞出菜单
本文来源:https://www.51html5.com/a1028.html
﹝超可爱 纯CSS3实现的小猪、小老鼠、小牛﹞相关内容
- 30款css3实现的鼠标经过图片显示描述特效
- Cufon, jQuery和CSS3实现的超强飞出菜单
- 分享Jquery+CSS3实现的3D下拉菜单特效
- 一款jquery和css3实现的卡通人物动画特效
- 一款jquery和css3实现的卡通人物动画特效
- 纯CSS实现的3D简洁按钮设计
- 谷歌开源Gumbo:纯C语言实现的HTML5解析库
- 小猪斗恶狼
- 关于CSS3 Transitions的小例子
- jQuery/CSS3实现超酷的动画Tab菜单