美文网首页
用css3画一个属于自己蓝胖子( 上 )

用css3画一个属于自己蓝胖子( 上 )

作者: 莫晓白 | 来源:发表于2017-07-10 23:54 被阅读0次

编码工具：sublime text 3
编写文件：html、css
运行环境：ie9+

css我们做一个简单的初始化操作

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  list-style: none; 
}

现在开始写html
先创建一个大的容器，在这个大的容器中，在创建一个小的画布

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main_body">
    <div class="head_wrap">
    </div>
</div>
</body>
</html>

规定两个容器的大小

.main_container {
  width: 565px;
  height: 560px;
  margin: 0 auto;
  overflow: hidden; 
}

.head_wrap {
  width: 405px;
  height: 650px;
  margin: 40px auto 0;
  overflow: hidden; 
}

开始画蓝胖子的脑袋和脸
在head_wrap中添加两个新的div，用作蓝胖子的脑袋和脸

<div class="header">
  <div class="face">
  </div>
</div>

.header {
    width: 400px;
    height: 365px;
    background-color: #089ce4;
    border-radius: 50%;
    border: 2px solid #1f1f1f;
    margin: 0 auto;
}
.face {
  width: 360px;
  height: 300px;
  margin: 65px auto 0;
  border-radius: 50%;
  border: 2px solid #1f1f1f;
  background-color: #ffffff;
  position: relative;
}

在设置宽高的时候，切记我们不能设置成一样的，设置为一样的，我们的蓝胖子就真的成球了。
现在我们在浏览器中，就可以看到一个大概的样子

image.png

接下来我们来画蓝胖子眼睛
在face中我们继续添加div

<div class="eye_wrap">
  <div class="eye_inner_container">
    <!--左眼-->
    <div class="eye_left">
      <div class="eye">
        <div class="eyeball">
        </div>
      </div>
    </div>
    <!--右眼-->
    <div class="eye_right">
      <div class="eye">
        <div class="eyeball">
        </div>
      </div>
    </div>
  </div>
</div>

我们先规定一下容器和子

.eye_wrap {
  width: 100%;
  height: 106px;
}
.eye_inner_container {
  width: 172px;
  margin: -40px auto 0;
}

眼睛的步骤较多我们分布来画，首先我们先来画眼白

.eye_left,.eye_right {
  width: 86px;
  height: 104px;
  border: 2px solid #1f1f1f;
  border-radius: 50% 50% 50% 50%/55% 60% 45% 45%;
  -webkit-border-radius: 50% 50% 50% 50%/55% 60% 45% 45%;
  float: left;
  position: relative;
  background-color: #ffffff;
}
image.png

现在看这比较诡异，我们稍微调整一下两个眼睛的旋转角度

.eye_left {
  transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -webkit-transform: rotate(12deg);
  -o-transform: rotate(12deg);
}
.eye_right {
  transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -webkit-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  margin: 0 0 0 -1px;
}
image.png

现在看起来好多了，我们接着画眼球

.eye_left .eye, .eye_right .eye {
  width: 26px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #1f1f1f;
  background-color: #1f1f1f;
}
image.png

我的蓝胖子不可能是这样的，别急，我们在调整一下位置

.eye_left .eye {
  position: absolute;
  left: 40px;
  top: 35px;
  transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
}
.eye_right .eye {
  position: absolute;
  right: 40px;
  top: 35px;
  transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
image.png

ok，这样看起来好多了，我们继续画眼睛里的高光

.eye_left .eye .eyeball, .eye_right .eye .eyeball {
  width: 8px;
  height: 11px;
  background-color: #ffffff;
  border-radius: 50%;
  margin: 8px 6px;
}
.eye_right .eyebrow {
  transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  margin: 22px 0 0 2px;
}
image.png

现在大概的样子就出来了，继续，接下来还有鼻子
在face中我们继续添加div

<div class="nose_wrap">
  <div class="nose">
    <div class="nose_white"></div>
  </div>
</div>

.nose_wrap {
  width: 100%;
  position: relative;
}
.nose {
  width: 54px;
  height: 54px;
  position: absolute;
  top: -28px;
  left: 151px;
  border-radius: 50%;
  background-color: #e5002a;
  border: 2px solid #1f1f1f;
  overflow: hidden;
}
.nose_white {
  width: 14px;
  height: 14px;
  margin: 12px 17px;
  border-radius: 50%;
  background-color: #ffffff;
}
image.png

接下来我们画他的嘴
同样先添加div

<div class="mouth_wrap">
  <div class="mouth_line"></div>
  <div class="mouth_border">
    <div class="mouth_black"></div>
  </div>
</div>

.mouth_wrap {
  width: 100%;
  height: 190px;
  overflow: hidden;
}
.mouth_line {
  width: 2px;
  height: 130px;
  background-color: #000000;
  margin: 26px auto 0;
}

蓝胖子的嘴分为两部分，我们先画那条线，再画嘴

.mouth_line {
  width: 2px;
  height: 130px;
  background-color: #000000;
  margin: 26px auto 0;
}
image.png

接下来我们把他的嘴画出来

.mouth_border {
  width: 100%;
  height: 40px;
  overflow: hidden;
  transform: rotate(180deg);
}
.mouth_black {
  width: 120px;
  height: 100px;
  margin: 8px auto 0;
  border: 3px solid #1f1f1f;
  border-radius: 50%;
}
image.png

接下来就比较难画了，我们画他的胡子
在face中我们添加最后一组div

<div class="mustache_wrap">
  <ul class="mustache_left">
    <li class="mustache_one">
      <div class="mustache_line"></div>
    </li>
     <li class="mustache_two">
       <div class="mustache_line"></div>
     </li>
     <li class="mustache_three">
       <div class="mustache_line"></div>
     </li>
  </ul>
  <ul class="mustache_right">
      <li class="mustache_one">
        <div class="mustache_line"></div>
      </li>
      <li class="mustache_two">
        <div class="mustache_line"></div>
        </li>
        <li class="mustache_three">
          <div class="mustache_line"></div>
        </li>
    </ul>
  </div>

.mustache_wrap {
  width: 100%;
  height: 150px;
  padding: 0 40px;
  position: absolute;
  top: 90px;
}
.mustache_wrap ul {
  width: 50%;
  height: 150px;
  float: left;
}
.mustache_wrap ul li {
  width: 100%;
  height: 33%;
}
.mustache_line {
  width: 90px;
  height: 2px;
  background-color: #000000;
}
.mustache_wrap ul.mustache_right li {
  margin: 0 0 0 40px;
}
image.png

我们把他的胡子旋转一下

.mustache_wrap ul.mustache_left .mustache_one .mustache_line {
  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -o-transform: rotate(25deg);
  margin: 0 0 0 5px;
}
.mustache_wrap ul.mustache_left .mustache_three .mustache_line {
  transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  margin: 0 0 0 5px;
}

.mustache_wrap ul.mustache_right .mustache_one .mustache_line {
  transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  -o-transform: rotate(-25deg); }
.mustache_wrap ul.mustache_right .mustache_three .mustache_line {
  transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -o-transform: rotate(25deg);
}
image.png

现在基本就差不多了，现在还差一个红色的小项圈和一个黄色的小铃铛，我们下次再接着做。

相关文章

  • 用css3画一个属于自己蓝胖子( 上 )

    编码工具：sublime text 3编写文件：html、css运行环境：ie9+ css我们做一个简单的初始化操...

  • 用css3画一个属于自己的蓝胖子（下）

    接上回，我们把蓝胖子的头画齐了，现在我们画他的项圈和铃铛在header中添加一组div 好，我们的蓝胖子就快完成了...

  • 工作日常乱画乱涂03

    总画不好蓝胖子……哎

  • 蓝胖子陪我成长

    不得不说自己是晚熟里的晚熟精品，20岁的时候突然迷恋上这个蓝胖子，把蓝胖子系列动漫全部看完，后来买了蓝胖子玩偶，放...

  • 偶尔调戏一下蓝胖子

    用交互软件玩转蓝胖子：

  • 石头画——蓝胖子

    画材买了一周，因为突然去工作，画石头的想法被搁置了一周。今天周末利用一下午的时间完成了一套可爱的——蓝胖子。 下面...

  • 手把手教你画哆啦—圆珠笔

    今天更新一个超简单的圆珠笔蓝胖子 有小伙伴说圆珠笔不好掌握，有没什么技巧？ 我觉得技巧就是不能着急，用排线慢慢画 ...

  • CSS3 实现花式背景图案

    CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景，事实上用渐变配合background背景图层可以创...

  • 胖子的故事

    每个故事里，都有一个胖子。 每一个胖子，都有属于自己的超能力。 没有特别的称谓，天下所有胖子的名字都是“胖子。”当...

  • 今天爱上了画蓝胖子

    生命如果按天划分，有三万多个单位；如果每天有一种可能，那就有三万多种可能。为了生存和梦想，我们不得不谋杀掉n-1种...

网友评论

      本文标题：用css3画一个属于自己蓝胖子( 上 )

      本文链接：https://www.haomeiwen.com/subject/ahwuhxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|用css3画一个属于自己蓝胖子( 上 )|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！