CSS 画一只可爱的小柯基犬
我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！
前言
最近隔壁公司买了一只小柯基，经常来我们公司玩。它非常可爱。今天就用 CSS 来实现一只可爱的小柯基吧！
显示结果
执行
小柯基犬有小头、圆眼睛、长耳朵、鼻子、嘴巴、短腿、身体和尾巴。先搭建它的body结构，然后用css一点一点的实现body的各个部分
1.正文结构（html）
可分为头（包括眼睛、耳朵、鼻子、嘴）和身体（包括尾巴、腿）两部分
<div类=“狗”>
<div类=“头”>
< div class = "耳左耳" ></ div >
< div class = "ear ear-right" ></ div >
<div类=“鼻子”></ div >
<div类=“嘴”></ div >
<div类=“脸”>
< div class = "眼睛左眼" ></ div >
< div class = "眼睛右眼" ></ div >
</ div >
</ div >
<div类=“正文”>
< div 类 = “腿” >
< div class = "legs__front 腿__front-left" ></ div >
< div class = "legs__front 腿__front-right" ></ div >
< div class = "legs__backlegs__back-left" ></ div >
</ div >
<div类=“尾巴”></ div >
</ div >
</ div >
复制代码
2. CSS 绘制小柯基的头部
一个。整体头部，设置宽高
。头{
宽度：100px；
高度：80px；
位置：相对；
}
复制代码
湾。两只长耳朵
使用绝对定位控制头部左右耳的位置； 边界半径 属性达到尖耳朵的效果； 旋转 受控的耳朵倾斜显示
。耳朵 {
位置：绝对；
背景颜色：#f79e38；
高度：60px；
宽度：24px；
z指数：8；
}
.ear-left {
最高： - 35%；
左：- 5px；
边框左上角半径：68% 100%；
边框右上角半径：100% 100%；
变换：旋转（- 40 度）；
}
.ear-left ::之后{
内容： '';
宽度：60%；
高度：90%；
位置：绝对；
前10名％;
左：50%；
变换：translateX(- 50%);
边框左上角半径：68% 100%；
边框右上角半径：100% 100%；
背景颜色：#fff；
}
.ear-right {
最高： - 39%；
右：0；
边框左上角半径：56% 100%；
边框右上角半径：100% 100%；
变换：旋转（- 320 度）；
}
.ear-right ::在{之后
内容： '';
宽度：60%；
高度：90%；
位置：绝对；
前10名％;
左：50%；
变换：translateX(- 50%);
边框左上角半径：56% 100%；
边框右上角半径：100% 100%；
背景颜色：#fff；
}
复制代码
C。实现脸型，宽高与整体头部一致，因为脸是圆的，所以用 边界半径 属性使圆角；并使用伪元素制作脸部左右两侧的外套颜色
。脸 {
位置：相对；
宽度：100%；
高度：100%；
背景颜色：#fff；
边框半径：40px；
z指数：9；
溢出：隐藏；
}
.face ::之前{
内容： '';
位置：绝对；
顶部：0；
左：0；
宽度：35px；
高度：50px；
边框半径：40px 0px 27px 0px；
背景颜色：#f79e38；
}
.face ::之后{
内容： '';
位置：绝对；
顶部：0；
右：0；
宽度：60px；
高度：50px；
边框半径：0px 38px 5px 28px；
背景颜色：#f79e38；
}
复制代码
d。圆眼睛
。眼睛 {
宽度：10px；
高度：10px；
背景颜色：#000；
边界半径：50%；
位置：绝对；
最高：35%；
z 指数：10；
}
.左眼{
左：22%；
}
.eye-right {
对：42%；
}
复制代码
e.鼻子
使用伪元素来实现黑鼻子， 边界半径 属性改变形状，整体旋转小角度，达到立体效果
。鼻子 {
位置：绝对；
左：- 10%；
底部：2%；
宽度：80px；
高度：30px；
边框右下角半径：20px；
边框左下角半径：40px；
背景颜色：#fff；
z 指数：10；
变换：旋转（4度）；
}
.nose ::之前{
内容： '';
位置：绝对；
左：0；
顶部：0；
宽度：14px；
高度：8px；
边框右上角半径：4px；
边框右下角半径：4px；
边框左下角半径：6px；
背景颜色：#1C3130；
}
复制代码
F。嘴
。嘴 {
位置：绝对；
底部：15px；
左：- 5px；
宽度：11px；
高度：6px；
边界半径：50%；
边框底部：4px 实心#1C3130；
z 指数：11；
变换：旋转（10度）；
}
复制代码
3. CSS 绘制小柯基的身体部分
一个。全身
设置占位符的宽高；绝对定位控制显示身体的位置； 边界半径 属性实现了body的形状；使用伪元素来实现白色前面
。身体 {
位置：绝对；
左：40px；
顶部：34px；
宽度：200px；
高度：90px；
背景颜色：#f79e38；
边框右上角半径：17% 40%；
边框左上角半径：25%；
边框右下角半径：5% 13%；
边界左下角半径：25% 40%；
z 指数：4；
}
.body ::之后{
内容： '';
位置：绝对；
宽度：30%；
高度：90%；
背景颜色：#fff；
边框右上角半径：10%；
边框左上角半径：40%；
边框右下角半径：40%；
边界左下角半径：62%；
}
复制代码
湾。四短腿
腿是黄毛，伪元素成就白脚
.腿{
位置：绝对；
最高：97%；
左：0；
宽度：100%；
高度：30%；
z指数：3；
}
.legs__front,
.legs__back {
宽度：10%；
高度：100%；
背景颜色：#f79e38；
位置：绝对；
边框右下角半径：100%；
边界左下角半径：100%；
}
.legs__front ::之后，
.legs__back ::之后{
内容： '';
位置：绝对；
最高：50%；
宽度：100%；
身高：49%；
背景颜色：#fff；
边框右下角半径：100%；
边界左下角半径：100%；
}
.legs__前左{
左：38%；
变换：旋转（1度）；
}
.legs__front-right {
左：20%；
变换：旋转（- 4 度）；
}
.legs__back-left {
左：69%；
变换：旋转（- 7 度）；
}
.legs__back-right {
左：85%；
变换：旋转（2度）；
}
复制代码
C。短尾巴
。尾巴 {
位置：绝对；
顶部：0；
右：0；
宽度：30px；
高度：20px；
边框半径：10px；
背景颜色：#f79e38；
变换：旋转（- 30 度）；
}
复制代码
根据上面的代码，就可以简单的实现一只可爱的小柯基了
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/3123/10407/1824
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号