css实现小黄人图像的制作与动画效果的实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/*小黄人的容器*/.wrap {width: 400px;height: 600px;margin: 0 auto;border: 1px solid red;position: relative;  /* 子绝父相  */}/*小黄人的身体*/.xhr_body {width: 250px;height: 400px;border: 5px solid #000;border-radius: 125px;position: absolute;/*margin: 50px 75px;*/top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: yellow;overflow: hidden;}/*小黄人的头发*/.xhr_hair_1,.xhr_hair_2 {width: 130px;height: 100px;border-top: 10px solid #000;border-radius: 50%;position: absolute;}.xhr_hair_1 {left: 100px;top: 80px;transform: rotate(48deg);}.xhr_hair_2 {left: 105px;top: 70px;transform: rotate(48deg);}/*小黄人的手*/.xhr_hand_l,.xhr_hand_r {width: 100px;height: 100px;border: 5px solid #000;position: absolute;border-radius: 30px;background-color: yellow;z-index: -1;}.xhr_hand_l {left: 50px;top: 300px;transform: rotate(30deg);}.xhr_hand_r {right: 50px;top: 300px;transform: rotate(-30deg);}.xhr_hand_l::after,.xhr_hand_r::after {content: "";width: 50px;height: 10px;background-color: #000;position: absolute;border-radius: 5px;}.xhr_hand_l:after {left: 5px;top: 60px;transform: rotate(-90deg);}.xhr_hand_r:after {right: 5px;top: 60px;transform: rotate(-90deg);}/*小黄人的腿部*/.xhr_foot_r,.xhr_foot_l {width: 40px;height: 70px;background: #000;position: absolute;z-index: -1;}.xhr_foot_r {left: 150px;top: 496px;}.xhr_foot_l {right: 150px;top: 496px;}/*小黄人的脚*/.xhr_foot_r::after,.xhr_foot_l::after {content: "";width: 60px;height: 40px;background: #000;border-radius: 20px;position: absolute;}.xhr_foot_r::after {left: -40px;top: 30px;}.xhr_foot_l::after {right: -40px;top: 30px;}/*小黄人的眼睛*/.xhr_eyes {/*width: 100%;height: 100px;*//*border: 1px solid yellow;*/position: absolute;top: 60px;left: 25px;}.xhr_eyes_l,.xhr_eyes_r {width: 90px;height: 90px;border: 5px solid #000;border-radius: 50%;background: #fff;float: left;}/*眼镜框*/.xhr_eyes_l::after,.xhr_eyes_r::after {content: "";width: 33px;height: 20px;position: absolute;background-color: #000;}.xhr_eyes_l::after {left: -29px;top: 38px;transform: rotate(14deg);border-radius: 2px 7px 0px 2px;}.xhr_eyes_r::after {right: -29px;top: 38px;transform: rotate(-14deg);border-radius: 7px 2px 0px 2px;}/*小黄人的黑眼珠部分*/.xhr_el_black,.xhr_er_black {width: 50px;height: 50px;background-color: #000;border-radius: 50%;position: absolute;}.xhr_el_black {left: 25px;top: 22px;}.xhr_er_black {right: 25px;top: 22px;}/*小黄人的白眼珠部分*/.xhr_el_wite, .xhr_er_wite {width: 25px;height: 25px;background-color: #fff;border-radius: 50%;position: absolute;}.xhr_el_wite {left: 48px;top: 34px;}.xhr_er_wite {right: 48px;top: 34px;}/*小黄人嘴巴部分*/.xhr_mouth {width: 60px;height: 35px;border: 5px solid #000;border-radius: 0 0 0 30px;background: #fff;position: absolute;left: 90px;top: 200px;transform: rotate(-30deg);}.xhr_mouth::after {content: "";width: 82px;height: 44px;background-color: yellow;position: absolute;border-bottom: 5px solid #000;border-radius: 12px;left: 2px;top: -27px;transform: rotate(30deg);}/*小黄人裤子*/.xhr_trousers {width: 100%;height: 150px;/*border: 1px solid red;*/position: absolute;top: 260px;}.xhr_trousers_top {width: 150px;height: 50px;background: blue;border: 5px solid #000;border-bottom: none;position: absolute;left: 45px;}.xhr_trousers_bottom {width: 250px;height: 90px;background-color: blue;border-top: 5px solid #000;/*border-bottom: none;*/position: absolute;top: 50px;}/*小黄人肩带部分*/.t_l_belt,.t_r_belt {width: 100px;height: 20px;background: blue;border: 5px solid #000;position: absolute;top: -24px;}.t_l_belt {left: -74px;transform: rotate(35deg);}.t_r_belt {right: -74px;transform: rotate(-35deg);}/*利用伪元素来制作肩带扣子*/.t_l_belt::after,.t_r_belt::after {content: "";background: #000;width: 10px;height: 10px;border-radius: 50%;position: absolute;top: 5px;}.t_l_belt::after {left: 82px;}.t_r_belt::after {left: 6px;}/*头发和眼睛的动画效果*/.xhr_hair_1,.xhr_hair_2 {animation: movehair 2s ease-in infinite;}@keyframes movehair {10%,,80%{transform: rotate(66deg); }30% {transform: rotate(55deg); }50%,100% {transform: rotate(48deg); }}.xhr_el_black,.xhr_er_black {animation: moveBlackEyes 5s ease-in infinite;}@keyframes moveBlackEyes {10%,50%,100% {transform: translate(0); }30% {transform: translate(20px); }80% {transform: translate(-20px);}}.xhr_el_wite,.xhr_er_wite {animation: moveWiteEyes 5s ease-in infinite;}@keyframes moveWiteEyes {10%,50%,100% {transform: translate(0); }30% {transform: translate(20px,6px); }80% {transform: translate(-20px,6px);}}</style>
</head>
<body><!-- 小黄人的容器 --><div class="wrap"><!-- 小黄人的头发 --><div class="xhr_hair"><div class="xhr_hair_1"></div><div class="xhr_hair_2"></div></div><!-- 小黄人的身体 --><div class="xhr_body"><!-- 小黄人的眼睛 --><div class="xhr_eyes"><!-- 小黄人的左眼睛 --><div class="xhr_eyes_l"><!-- 小黄人左眼的黑色部分 --><div class="xhr_el_black"></div><!-- 小黄人左眼的白色部分 --><div class="xhr_el_wite"></div></div><!-- 小黄人的右眼睛 --><div class="xhr_eyes_r"><!-- 小黄人右眼的黑色部分 --><div class="xhr_er_black"></div><!-- 小黄人右眼的白色部分 --><div class="xhr_er_wite"></div></div></div><!-- 小黄人的嘴巴 --><div class="xhr_mouth"></div><!-- 小黄人的裤子 --><div class="xhr_trousers"><!-- 小黄人裤子的上部分 --><div class="xhr_trousers_top"><!-- 小黄人的肩带 --><div class="t_l_belt"></div><div class="t_r_belt"></div></div><!-- 小黄人裤子的下部分 --><div class="xhr_trousers_bottom"></div></div></div><!-- 小黄人的手 --><div class="xhr_hand"><div class="xhr_hand_l"></div><div class="xhr_hand_r"></div></div><!-- 小黄人的脚 --><div class="xhr_foot"><div class="xhr_foot_l"></div><div class="xhr_foot_r"></div></div></div>
</body>
</html>

css实现小黄人图像的制作与动画效果的实现相关推荐

css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
微信小程序相关三、css写小黄人
小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人都是用的css,基 ...
html设计动画小黄人,纯CSS3画出小黄人并实现动画效果_html/css_WEB-ITnose
原文出处: 郭锦荣前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效 ...
纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
html设计动画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
HTML+CSS好看的小黄人网页制作（首页部分）
效果如下: 整体效果: body部分动图: 导航栏二级菜单跳转: 代码部分: 首页HTML代码: <!DOCTTYPE html> <html lang="en" ...
HTML+CSS好看的小黄人网页制作（人物介绍部分，附全部代码）
效果如下: 整体效果: 动态部分: 人物介绍部分通过缩放增强视觉冲击效果,使得网页更加灵动. 代码部分: HTML代码: <!DOCTTYPE html> <html lang=&q ...
使用CSS3制作小黄人动画
代码地址:https://github.com/WLL0113/myminions myminions 使用css3和js制作小黄人的动画最终要实现身体,手,眼睛以及脚的动画. 小黄人身体部件拆分 ...
html怎么制作小黄人,【PS教程】制作一个小黄人
原标题:[PS教程]制作一个小黄人小黄人已经是个无需介绍的人气角色,呆萌的外表让他成为了践踏主角的超级巨星,在全球拥有无数粉丝,作为喜欢小黄人的设计师,是不是一定要懂得3D软件才能做出小黄人哩?NO ...

css实现小黄人图像的制作与动画效果的实现

css实现小黄人图像的制作与动画效果的实现相关推荐

最新文章

热门文章