CSS做一个小黄人

最新推荐文章于 2021-08-04 01:44:10 发布
原创 最新推荐文章于 2021-08-04 01:44:10 发布 · 935 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原发明人的文章：http://mp.weixin.qq.com/s?__biz=MjM5OTA1MDUyMA==&mid=210492428&idx=2&sn=c3581ceac502efe70396c42adc8cf3f0&scene=1&srcid=KXmyGTvQ7tPviFLp52fo&key=dffc561732c226518cdc1384523b0b9a18f770a8ddd8f6956606a22ccff5e3a6a2c5c32c6d221042ec189adaf13b23e2&ascene=1&uin=MTk3NDUxODAw&devicetype=Windows+10&version=6102002a&pass_ticket=4M5mMBQNEsyaIhmPcSR%2FXDAQ4Gky5nfNZsKjNUFionQ%3D

原发明人的源代码：https://github.com/JR93/littleHuang

我的代码，完成了基本部分，并且合并了html和css，加了我自己的注释，可以复制到http://www.zaole.net/查看效果：

                <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      body{
        /*background-color:white;*/
        margin:0;
        padding:0;
      }
      /*以下是1身体*/
      .wrapper{
        width:300px;
        margin:100px auto;
      }
      .littleH{
        position:relative;/*用于给子层定位*/
      }
      .bodyH{
        position:absolute;
        width:240px;
        height:400px;
        border:5px solid #000;
        border-radius:115px;
        background:rgb(249,217,70);
        overflow:hidden;
        z-index:2;
      }
      /*以下是2裤子*/
      .bodyH .trousers{/*注意中间的空格*/
        position:absolute;
        bottom:0;
        width:100%;
        height:100px;
        border-top: 6px solid #000;
        background:rgb(32,116,160);
      }
      .bodyH .trousers_top{
        width:160px;
        height:60px;
        border:6px solid #000;
        border-bottom:none;
        border-radius:0 0 5px 5px;
        background:rgb(32,116,160);
        position:absolute;
        bottom:100px;
        left:34px;
      }
      /*以下是3吊带*/
      .bodyH .condoleBelt{
        position:absolute;
      }
      .bodyH .condoleBelt .left,
      .bodyH .condoleBelt .right{
        width:100px;
        height:16px;
        border:5px solid #000;
        background:rgb(32,116,160);
        position:absolute;
        top:-90px;
        left:-35px;
        z-index:2;
        -webkit-transform:rotate(45deg);
      }
      .bodyH .condoleBelt .left{
        top:-88px;
        left:165px;
        -webkit-transform:rotate(-45deg);
      }
      .bodyH .condoleBelt .left:after,
      .bodyH .condoleBelt .right:after{
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #000;
        position: absolute;
        top:4px;
        left:88px;
      }
      .bodyH .condoleBelt .left:after{
  left:5px;
      }
      /*以下是4裤袋*/
      .pocket{
        width:60px;
        height:45px;
        border:6px solid #000;
        border-radius: 0px 0px 25px 25px;
        position: absolute;
        bottom:65px;
        left:84px;
      }
      .line_right{
       width: 30px;
        height: 30px;
        border-bottom-left-radius:100px;
        border-bottom:6px solid #000;
        border-left:6px solid #000;
        position:absolute;
        left:0;
        bottom:60px;
        -webkit-transform:rotate(-75deg);
      }
      .line_left{
        width: 30px;
        height: 30px;
        border-bottom-right-radius: 100px;
        border-bottom:6px solid #000;
        border-right:6px solid #000;
        position: absolute;
        right: 0;
        bottom:63px;
        -webkit-transform:rotate(75deg);
      }
      .line_bottom{
        height: 40px;
        border:3px solid #000;
        border-radius: 3px;
        position: absolute;
        left:118px;
        bottom: 0px;
      }
      /*以下是5眼睛*/
      .eyes{
        position:relative;
        z-index:3;
      }
      .eyes .leftEye, .eyes .rightEye{
        width:85px;
        height:85px;
        position:absolute;
        background:#fff;
        border-radius:50%;
        border:6px solid #000;
        top:60px;
        left:27px;
      }
      .eyes .rightEye{
        left:124px;
      }
      .eyes .leftEye .left_blackEye,
      .eyes .rightEye .right_blackEye{
        width:40px;
        height:40px;
        border-radius:50%;
        background:#000;
        position:absolute;
        top:24px;
        left:22px;
        -webkit-animation:blackeye 5s ease-in infinite;
      }
      @-webkit-keyframes blackeye{
        0%,20%,50%,70%,100%{
          -webkit-transform:translateX(0px);
        }
        30%,40%{
         -webkit-transform:translateX(15px);
        }
        80%,90%{
         -webkit-transform:translateX(-15px);
        }
      }
      .eyes .leftEye .left_blackEye .left_white,
      .eyes .rightEye .right_blackEye .right_white{
        width:20px;
        height:20px;
        border-radius:50%;
        background:#fff;
        position:absolute;
        top:7px;
        left:17px;
        -webkit-animation:whiteeye 5s ease-in-out infinite;
      }
      @-webkit-keyframes whiteeye{
        0%,20%,50%,70%,100%{
          -webkit-transform:translateX(0px);
        }
        30%,40%{
          -webkit-transform:translate3d(3px,4px,0);
        }
        80%,90%{
          -webkit-transform:translate3d(-15px,4px,0);
        }
      }
      .eyes .leftEye .left_blackEye .left_white{
        top:4px;
        left:17px;
      }
      .eyes .leftEye:after,
      .eyes .rightEye:after{
        content: '';
        background:#000;
        position:absolute;
        width:28px;
        height:18px;
        left:-30px;
        top:37px;
        -webkit-transform:skewX(20deg) rotate(7deg);
      }
      .eyes .rightEye:after{
        left:89px;
        top:37px;
        -webkit-transform:skewX(-20deg) rotate(-7deg);
      }
      /*以下是6嘴巴*/
      .mouse{
        position: relative;
      }
      .mouse .mouse_shape{
        width:55px;
        height:35px;
        border:5px solid #000;
        border-bottom-left-radius: 30px;
        background: #fff;
        position: absolute;
        top:175px;
        left:98px;
        z-index:3;
        -webkit-transform:rotate(-35deg);
      }
    </style>
  </head>
  <body>
 <div class="wrapper"><!-- 容器 -->
      <div class="littleH"><!-- 小黄人 -->
      <div class="bodyH"><!-- 身体 -->
         <div class="trousers"><!-- 裤子 -->
             <div class="condoleBelt"><!-- 吊带 -->
                 <div class="left"></div>
                 <div class="right"></div>
             </div>
             <div class="trousers_top"></div>
           <!-- 裤子突出的矩形部分 -->
             <div class="pocket"></div><!-- 裤袋 -->
             <!-- 三条线 -->
             <span class="line_left"></span>
             <span class="line_right"></span>
             <span class="line_bottom"></span>
         </div>
      </div>
      <div class="hair"><!-- 头发 -->
         <span class="left_hair_one"></span>
         <span class="left_hair_two"></span>
      </div>
      <div class="eyes"><!-- 眼睛 -->
         <div class="leftEye"><!-- 左眼 -->
             <div class="left_blackEye">
                 <div class="left_white"></div>
             </div>
         </div>
         <div class="rightEye"><!-- 右眼 -->
             <div class="right_blackEye">
                 <div class="right_white"></div>
             </div>
         </div>
      </div>
      <div class="mouse"><!-- 嘴巴 -->
         <div class="mouse_shape"></div>
      </div>
      <div class="hands"><!-- 双手 -->
         <div class="leftHand"></div>
         <div class="rightHand"></div>
      </div>
      <div class="feet"><!-- 双脚 -->
         <div class="left_foot"></div>
         <div class="right_foot"></div>
      </div>
      <div class="groundShadow"></div><!-- 脚底阴影 -->
      </div>
 </div>
  </body>
</html>

               

css写一个小黄人
weixin_43389331的博客
04-24 565
小黄人 实现思想： 1、用一个容器装小黄人，样式定位为相对定位：<div class="wrap"></div> 2、把整个小黄人的身体做出来，然后添加头发； 3、实现小黄人的手臂； 4、小黄人的腿、脚； 5、小黄人的眼睛、眼镜、眼球部分 6、衣服部分。 我这里主要使用伪元素，CSS3的动画animation，transform； Animation:动画名称 动画时间 运...
【CSS】小黄人案例
连通块的应用
09-15 847
CSS部分过了一遍，跟着做了一个综合案例，小黄人（眼睛会动的哦）,觉得里面有很好的值得借鉴的地方，所以在此做下笔记： 效果图： 代码实现： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小黄人制作</title> <style&gt...
纯css3 小黄人
09-17
闲暇时间看了一下CSS3，并用CSS3写了一个最近很流行的小黄人
纯CSS3画出小黄人并实现动画效果
weixin_30892763的博客
07-19 220
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的...
css制作小黄人
notChange的博客
06-29 735
制作小黄人 实现效果，其中，头发和眼睛有动画效果 制作过程 制作容器 <!-- 容器 --> <div class="wrap"> <!-- 头发 --> <div class="xhr_hair"> <div class="xhr_hair_1"></div> <div class="xhr_hair...
css 画小黄人,纯CSS3画出小黄人并实现动画效果
weixin_34792357的博客
08-04 587
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来满足自己的需求，本想勉强能看就行了。可是呢，还是抵不住自己内心的完美，于是乎，用了一个晚上用CSS3画出了小黄人再实现类似的动画...
CSS3实现可爱的小黄人动画
09-24
在本示例中，我们将探讨如何使用CSS3来创建一个可爱的小黄人动画。这个动画涉及到多个CSS3的关键特性，包括但不限于`perspective`、`perspective-origin`、`transform-style`、`transform-origin`、`animation`、`@...
CSS3 实现的小黄人眨眼动画效果源码.zip
10-31
在本压缩包“CSS3 实现的小黄人眨眼动画效果源码.zip”中，包含了一个使用CSS3技术实现的小黄人眨眼动画的源代码。这个动画效果是通过CSS3的关键帧动画（@keyframes）来完成的，展示了CSS3在网页动态效果设计方面的...
纯css3绘制的小黄人头像动画特效源码.zip
10-31
4. **动画和过渡**：CSS3的`@keyframes`规则让我们能定义动画序列，而`transition`属性则用于平滑地改变一个或多个CSS属性，这些在小黄人头像的动态效果中会非常关键。 5. **响应式设计**：虽然这不是标题直接指出...
用css3写的小黄人
09-12
本项目“用css3写的小黄人”聚焦于利用CSS3的特性来创建一个生动有趣的小黄人动画，这无疑是一个学习和实践CSS3技术的好案例。小黄人是电影《神偷奶爸》中的经典角色，以其独特的形象和幽默的性格深受喜爱。通过这个...
小黄人.html
07-27
css实现小黄人图像的制作与动画效果的实现,自己尝试完成的。
纯css画小黄人
qq_43260038的博客
09-20 481
纯css画小黄人 小黄人截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <MET
用html和css制作小黄人,CSS小黄人
weixin_35997246的博客
06-18 135
body {margin:0;padding:0;}/*身体*/.wrapper {width:300px;margin:100px auto;}.litteH {position:relative;}.bodyH {position:absolute;width:240px;height:400px;border:5px solid #000;border-radius:115px;backgr...
使用CSS3制作小黄人动画
超胖猫儿的博客
08-31 728
代码地址：https://github.com/WLL0113/myminions myminions 使用css3和js制作小黄人的动画 最终要实现身体，手，眼睛以及脚的动画。 小黄人身体部件拆分 1.容器 2.头毛 三根头发 3.身体 眼镜线 眼睛 眼珠 嘴 嘴上部分覆...
纯CSS小黄人，让你眼前一亮的CSS技巧
jason_renyu的博客
10-30 376
纯CSS制作，小黄人动画 这是由纯CSS制作的小黄人动画 <!-- * @Author: shenzhipeng * @Email: shenzhipeng@csii.com.cn * @Date: 2020-08-28 14:39:49 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo.
用html和css制作小黄人,纯CSS3画出小黄人并实现动画效果
weixin_42510841的博客
06-14 282
原标题：纯CSS3画出小黄人并实现动画效果作者：郭锦荣www.cnblogs.com/jr1993/p/4658772.html前言前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。但是，其实我的初衷是想体验一下用图片做动画的赶脚，但是找不到素材，才无奈用了最笨的方法来...
用HTML+CSS做一个小黄人
DOLEAM的博客
05-31 1306
纪念一下，初学css做的第一个成品 先放图 历时——5小时，有点慢了 刘海做的有点长 当然，还存在一些不足。感觉代码有点累赘。。。。。。 另外，我还没搞清 float 和 absolute 的区别，感觉用的时候差距不大啊 有哪个大神懂的话给我讲讲呗。 ...
用html和css制作小黄人,CSS3 小黄人案例
weixin_42499100的博客
06-14 257
.wrap{2 width:400px;3 height:600px;4 margin:0 auto;5 border:1px solid red;6 position:relative;7 }89 /*身体*/10 .body{11 width:250px;12 height:400px;13 border:5px solid #000;14 border-rad...
使用CSS3创建小黄人动画实战解析
在本文中，我们将探讨如何利用CSS3技术制作一个可爱的小黄人动画。CSS3的引入为网页设计师提供了丰富的动画功能，使得创建动态效果变得更加简单且高效。通过分析给出的代码示例，我们可以了解到实现这一动画涉及的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值