纯Css3画出的凯蒂猫

开发工具与关键技术：DW border属性
撰写时间：2019年1月31日

哈哈，直奔主题不多说废话，先看看效果图吧！

是不是好可爱，有没有被萌到？
首先，我们来看一下 HTML 的头部结构布局：css3的样式大部分都是利用边框border的属性来实现的。在盒子上给一个边框设置一下圆角的效果，把不想要的边设置为透明的颜色，就可以出现一个半圆的效果。下面我们来看一下代码和效果图这样方便理解：

这下面就是整个头部的代码和效果图：

@charset "utf-8";
/* CSS Document */
/*---------------------头部------------------*/
.content{width: 350px;margin: 0 auto;
}
.phiz{width: 283px;height: 215px;border: solid 3px #4F3131;border-radius: 100px;border-top-color: transparent;margin: 0 auto;display: flex;justify-content: space-between;
}
.sbowknot{width: 283px;height: 126px;
}
.right,.left{width: 50px;height: 50px;border: solid 3px #4F3131;border-radius: 10px;border-bottom-color: transparent;margin-top: 10px;
}
.right{border-right-color: transparent;margin-left: 10px;transform: rotate(13deg);
}
.left{border-left-color: transparent;margin-right: 10px;transform: rotate(-13deg);
}
.thread{width: 157px;height: 120px;border: solid 3px #4F3131;border-radius: 100px;border-bottom-color: transparent;border-right-color: transparent;border-left-color: transparent;margin-left: -25px;margin-top: 0px;
}
.bowknot{width: 90px;height: 40px;transform: rotate(31deg);margin-left: -33px;display: flex;justify-content: space-between;
}
.rcircle,.lcircle{width: 50px;height: 37px;border: solid 3px #4F3131;border-radius: 25px;
}
.rcircle{border-right-color: transparent;margin-right: -15px;
}
.lcircle{border-left-color: transparent;margin-left: -15px;
}
.srcircle,.slcircle{width: 22px;height: 25px;border: solid 3px #4F3131;border-radius: 25px;margin-top: 4px;
}
.srcircle{border-right-color: transparent;margin-left: 13px;
}
.slcircle{border-left-color: transparent;margin-left: 5px;
}
.circle{width: 22px;height: 25px;border-radius: 50%;margin: 0 auto;border: solid 3px #4F3131;margin-top: 5px;
}
.eye{width: 181px;height: 76px;margin-top: 119px;margin-left: 2px;
}
.reye{width: 181px;height: 20px;margin-top: -66px;display: flex;justify-content: space-between;
}
.reye i{width: 20px;height: 30px;display: block;background: #4F3131;border-radius: 50%;
}
.nose{width: 27px;height: 17px;border: solid 3px #4F3131;border-radius: 50%;margin: 0 auto;
}
.beard{width: 200px;height: 50px;display: flex;justify-content: space-between;
}
.rbeard,.lbeard{width: 50px;height: 50px;margin-top: -31px;display: flex;justify-content: space-between;
}
.rbeard{margin-left: -77px;
}
.lbeard{margin-right: -55px;
}
.rbeard i:first-child,.lbeard i:first-child{height: 50px;margin-top: -15px;border:1px solid black;
}
.rbeard i:first-child{margin-left: 19px;transform:rotate(105deg);
}
.lbeard i:first-child{margin-left: 29px;transform:rotate(-105deg);
}
.rbeard i:nth-child(2),.lbeard i:nth-child(2){height: 50px;margin-top: 2px;border:1px solid black;
}
.rbeard i:nth-child(2){ margin-left: -6px;transform:rotate(86deg);
}
.lbeard i:nth-child(2){margin-right: -4px;transform:rotate(-86deg);
}
.rbeard i:last-child,.lbeard i:last-child{height: 50px;margin-top: 17px;border:1px solid black;
}
.rbeard i:last-child{margin-right: 27px;transform:rotate(67deg);
}
.lbeard i:last-child{margin-right: 30px;transform:rotate(-70deg);
}

身体部分也是同样的原理

/*---------------------身体部分------------------*/
.foot{width: 180px;height: 200px;margin: 0 auto;margin-top: -31px;display: flex;
}
.rfoot,.lfoot{width: 90px;height: 200px;border: solid 3px #4F3131;border-top-color: transparent;
}
.rfoot{border-bottom-right-radius: 60px;border-top-left-radius: 180px;border-bottom-left-radius: 125px;border-right-color: transparent;
}
.lfoot{border-bottom-left-radius: 60px;border-top-right-radius: 180px;border-bottom-right-radius: 125px;border-left-color: transparent;
}
.neck{width: 70px;height: 36px;border: solid 3px #4F3131;margin: 0 auto;border-radius: 50%;border-top-color: transparent;margin-top: -180px;
}
.shoe,.sock,.rsock,.lsock{margin: 0 auto;background: #4F3131;
}
.shoe{width: 177px;height: 3px;margin-top: 90px;
}
.sock{width: 3px;height: 37px;margin-top: -2px;
}
.rsock{width: 19px;height: 3px;margin-top: 3px;margin-left: 158px;transform: rotate(-40deg);
}
.lsock{width: 19px;height: 3px;margin-top: -3px;margin-left: 174px;transform: rotate(40deg);
}
.hand{width: 350px;height: 140px;margin-top: -152px;display: flex;justify-content: space-between;
}
.rhand,.lhand{width: 90px;height: 74px;border: solid 3px #4F3131;border-bottom-color: transparent;
}
.rhand{border-top-left-radius: 67px;border-bottom-left-radius: 125px;border-right-color: transparent;transform: rotate(-47deg);margin-left: 44px;
}
.rhand p,.lhand p{width: 39px;height: 3px;background: #4F3131;margin-top: 14px;
}
.rhand p{transform: rotate(44deg);margin-left: 10px;
}
.lhand{border-top-right-radius: 67px;border-bottom-right-radius: 125px;border-left-color: transparent;  transform: rotate(47deg);margin-right: 44px;
}
.lhand p{transform: rotate(-47deg);margin-left: 41px;
}

以上就是整个凯蒂猫的全部代码，你们也可以根据自己的兴趣爱好添加背景颜色这样的效果会更好。

纯Css3画出的凯蒂猫相关推荐

纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
html设计动画小黄人,纯CSS3画出小黄人并实现动画效果_html/css_WEB-ITnose
原文出处: 郭锦荣前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效 ...
html设计动画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
html设计动画小黄人,用纯css3画一个小黄人并实现动画效果
[摘要] 本文用纯css3画出一个动态的小黄人页面,代码简洁高效,是一个非常实用的CSS3学习案例. 不得不说CSS3的出现让网页更加绚丽生动,以前需要用图片来实现的效果现在完全可以通过几段css来解 ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
用php的for循环画椭圆,如何快速简单的使用css3画出各种各样的椭圆
以前前端开发的时候,对于那些特殊的图形,前端开发人员大部分的时候会使用图片的剪裁来插入特殊的图形,而现在随着css3的发展,很多形状可以通过css3画出,本篇文章给大家带来的内容是关于如何快速简单的使 ...
如何用c语言画个叮当猫,如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
纯css3画老虎耳朵动动画
下载地址纯css3画的老虎头像,并且老虎耳朵会动,不错的动画效果. dd:

纯Css3画出的凯蒂猫

纯Css3画出的凯蒂猫相关推荐

最新文章

热门文章