您现在的位置是：网站首页> 编程资料编程资料

css3绘制百度的小度熊_css3_CSS_网页制作_

2023-11-04 245人已围观

简介 本文通过实例代码给大家分享基于css3绘制百度的小度熊,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

前几天看到一篇文章是写用css3绘制腾讯企鹅的。趁着今天有空，就用css3来写一个百度的小度熊。话不多说，开始上码。

爆照

先来一张呆萌小度熊的成果照。


 

在绘制小度熊之前，首先要对小度熊布局上进行一个分解，便于我们组织代码结构。 从整体结构上主要分成耳朵，头部和身体。我们统一对将胳膊，肚子和腿都放到了身体的部分里。

纯css度熊

结构调整好之后，我们先把背景容器的位置和大小设置一下。在开发的时候，可以先给背景设置一个深色背景，便于我们看各部分的位置，最后的时候注释掉就可以了。

 /*背景容器*/ .bac { width: 345px; height: 500px; top: 50%; position: relative; left: 50%; transform: translate(-50%,-50%); /* background-color: #333333; */ }

头部

然后我们就可以在容器中，放置各个部分了，我是按从上到下的顺序写的，所以最开始放置的是头部。

 

 /*头部*/ .bac .head { width: 346px; height: 288px; /* background-color: #e1b79b; */ border: 3px solid #a57662; border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%; position: relative; z-index: 88; }

知识点来了，怎么样可以画出这种不规则的形状呢？绘制这种带有弧线的形状，可以使用border-radius属性，具体使用方法这里不深入讨论，简单来说通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。因为我没有准确的尺寸图，所以就用百分比来实现了。

“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。这个方法我们在后面还会很频繁的使用到。

耳朵

绘制完头部轮廓之后，我们可以把耳朵的轮廓也加上，本来计划是将耳朵写在头部

内部的，但是因为要考虑层级压盖的情况，还是把耳朵要素单独的放在了外面。这里有一个关键属性就是transform: rotate(Xdeg)用来对要素做旋转，我们可以将耳朵旋转成对应的角度。
 

 /*左耳朵*/ .earLeft { height: 50px; width: 70px; /* background-color: #e1b79b; */ border-radius: 200px 200px 100px 100px; border: 3px solid #a57662; transform: rotate(-49deg); position: absolute; top: 10px; left: 12px; } /*右耳朵*/ .earRight { height: 50px; width: 70px; /* background-color: #e1b79b; */ border-radius: 200px 200px 100px 100px; border: 3px solid #a57662; transform: rotate(40deg); position: absolute; top: 10px; right: 0; }

眼睛

接下来就开始填充绘制头部里面的内容，头部里面主要是眼睛，鼻子和嘴巴，我们先来画眼睛，为了看的清楚，我们就把头部填充上颜色了。

 

 /*左眼白*/ .head .eyeLeft { height: 78px; width: 67px; background-color: #ffffff; border-radius: 50% / 50%; transform: rotate(20deg); position: absolute; top: 113px; left: 68px; } /*左眼珠*/ .head .eyeConLeft { width: 28px; height: 33px; background-color: #511313; position: absolute; border-radius: 50%/50%; transform: rotate(-13deg); top: 20px; right: 15px; } /*右眼白*/ .head .eyeRight { height: 78px; width: 67px; background-color: #ffffff; border-radius: 50% / 50%; transform: rotate(-20deg); position: absolute; top: 113px; right: 68px; } /*右眼珠*/ .head .eyeConRight { width: 28px; height: 33px; background-color: #511313; position: absolute; border-radius: 50%/50%; transform: rotate(13deg); top: 20px; left: 15px; }

 

嘴巴

绘制了眼睛之后，我们来绘制嘴巴，嘴巴没有太特殊的地方，我们用正常椭圆就可以。
 

 /*嘴巴*/ .head .mouse { width: 99px; height: 76px; background-color: #f7f9e5; position: absolute; left: 50%; transform: translate(-50%,0); border-radius: 50% / 50%; top: 187px; }

鼻子

虽然嘴巴就是一个普通的椭圆，但是鼻子比较特殊，鼻子我们可以看作是一个半椭圆+三角形组成。


 

知识点又来了，怎么样用css画半椭圆和三角形呢？

我们可以利用 border-radius: 50%/100% 100% 0 0; 来实现半椭圆的绘制。


 

我们利用将width和height设置为0，通过border属性来实现三角形的绘制。


 

我为了操作方便，在给鼻子设置来一个容器，使其居中，便于调整。

 /*鼻子容器*/ .head .nose { width: 18px; height: 14px; position: absolute; left: 50%; margin-left: -9px; top: 13px; } /* 鼻子上部分-半椭圆*/ .nose .noseTop { width: 18px; height: 8px; background-color: #511313; border-radius: 50%/100% 100% 0 0; } /* 鼻子下部分-三角形*/ .nose .noseBottom { width: 0; height: 0; border-width: 9px 9px 0; border-style: solid; border-color: #511313 transparent transparent; position: relative; }

耳朵内部

终于完成了头部的操作，结果发现耳朵少了点什么，原来耳朵少了内部的要素，我们就分别给耳朵内部加点东西。


 

 /* 左耳朵内部*/ .earLeft .earCon { width: 40px; height: 60px; background-color: #eed8c5; border-radius: 50%/ 40% 40% 30% 30%; margin-left: 17px; margin-top: 15px; transform: rotate(-3deg); } /*右耳朵内部*/ .earRight .earCon { width: 40px; height: 60px; background-color: #eed8c5; border-radius: 50%/ 40% 40% 30% 30%; margin-left: 17px; margin-top: 15px; transform: rotate(-3deg); }

辅助要素

小度熊的头部绘制完了，但是耳朵的地方还不够完美，因为头部的轮廓线把耳朵遮住了，我们想让头部和耳朵连在一起，这就用到了我们的辅助要素。我们可以把辅助要素设置成和头部一样的颜色，将头部与耳朵间的轮廓线盖住，这样就看起来好多了。
 

 /*左侧辅助要素*/ .head .arcLeft { position: absolute; top: 36px; left: 23px; width: 80px; height: 30px; background-color: #e1b79b; border-radius: 50%/ 50%; transform: rotate(-45deg); } /*右侧辅助要素*/ .head .arcRight { position: absolute; top: 34px; right: 16px; width: 80px; height: 30px; background-color: #e1b79b; border-radius: 50%/ 50%; transform: rotate(43deg); }

身体

终于完成了头部的绘制，接下来就开始身体的绘制，同样需要先分析一下身体里包括那些部分，我们可以看到身体里主要包括胳膊，肚子和腿。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：使用CSS transition和animation改变渐变状态的实现方法_CSS教程_CSS_网页制作_

下一篇：移动端优先的flex三栏布局的使用方法_CSS布局实例_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网