站长资源网页制作
纯CSS3打造属于自己的“小黄人”
简介效果就像这样：不废话，直接上代码！hrml代码：XML/HTML Code复制内容到剪贴板 纯CSS3画出小黄人并实现动画效果<</div>
<div class="news_infos"><div id="MyContent"><p>效果就像这样：</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2016314101140869.jpg?2016214101156');"><img src="/UploadFiles/2021-03-30/2016314101140869.jpg?2016214101156" alt="纯CSS3打造属于自己的“小黄人”" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>不废话，直接上代码！</p>
<p>hrml代码：</p>
XML/HTML Code复制内容到剪贴板
<ol class="dp-xml">
<li><!DOCTYPE html> </li>
<li><html> </li>
<li><head lang="zh"> </li>
<li> <meta charset="UTF-8"> </li>
<li> <title>纯CSS3画出小黄人并实现动画效果</title> </li>
<li> <Link href="index.css" type="text/css" rel="stylesheet" /> </li>
<li></head> </li>
<li><body> </li>
<li> <!--容器--> </li>
<li> <div class="wrapper"> </li>
<li> <!--小黄人--> </li>
<li> <div class="container"> </li>
<li> <!--头发--> </li>
<li> <div class="hairs"> </li>
<li> <div class="hairs_one"></div> </li>
<li> <div class="hairs_two"></div> </li>
<li> </div> </li>
<li> <!--头发--> </li>
<li> <!--眼睛--> </li>
<li> <div class="eyes"> </li>
<li> <div class="eye_left"> </li>
<li> <div class="black"> </li>
<li> <div class="white"></div> </li>
<li> </div> </li>
<li> </div> </li>
<li> <div class="eye_right"> </li>
<li> <div class="black"> </li>
<li> <div class="white"></div> </li>
<li> </div> </li>
<li> </div> </li>
<li> </div> </li>
<li> <!--眼睛--> </li>
<li> <!--嘴巴--> </li>
<li> <div class="mouth"> </li>
<li> <div class="mouth_box"></div> </li>
<li> </div> </li>
<li> <!--嘴巴--> </li>
<li> <!--手--> </li>
<li> <div class="hands"> </li>
<li> <div class="left_hand"></div> </li>
<li> <div class="right_hand"></div> </li>
<li> </div> </li>
<li> <!--手--> </li>
<li> <!--身体--> </li>
<li> <div class="mybody"> </li>
<li> <!--裤子--> </li>
<li> <div class="trousers"> </li>
<li> <!--裤子突出部分--> </li>
<li> <div class="trousers_top"></div> </li>
<li> <!--裤子口袋--> </li>
<li> <div class="pocket"></div> </li>
<li> <!--三角线--> </li>
<li> <div class="line-left"></div> </li>
<li> <div class="line-right"></div> </li>
<li> <div class="line-bottom"></div> </li>
<li> <!--吊带--> </li>
<li> <div class="condoleBelt"> </li>
<li> <div class="left"></div> </li>
<li> <div class="right"></div> </li>
<li> </div> </li>
<li> </div> </li>
<li> <!--裤子--> </li>
<li> </div> </li>
<li> <!--身体--> </li>
<li> <!--脚--> </li>
<li> <div class="foot"> </li>
<li> <div class="left_foot"></div> </li>
<li> <div class="right_foot"></div> </li>
<li> </div> </li>
<li> <!--脚--> </li>
<li> <!--阴影--> </li>
<li> <div class="foot_shadow"></div> </li>
<li> <!--阴影--> </li>
<li> </div> </li>
<li> </div> </li>
<li></body> </li>
<li></html> </li>
</ol>
<p>css代码：</p>
CSS Code复制内容到剪贴板
<ol class="dp-css">
<li>body { </li>
<li> margin: 0; </li>
<li> padding: 0; </li>
<li>} </li>
<li>.wrapper { </li>
<li> width: 300px; </li>
<li> margin: 100px auto; </li>
<li>} </li>
<li>.container { </li>
<li> position: relative; </li>
<li>} </li>
<li>.container .mybody { </li>
<li> position: absolute; </li>
<li> width: 240px; </li>
<li> height: 400px; </li>
<li> border: 5px solid #000; </li>
<li> border-radius: 115px; </li>
<li> background: #f9d946; </li>
<li> overflow: hidden; </li>
<li> z-index: 2; </li>
<li>} </li>
<li>.container .mybody .trousers { </li>
<li> position: absolute; </li>
<li> bottombottom: 0; </li>
<li> width: 100%; </li>
<li> height: 100px; </li>
<li> border-top: 6px solid #000; </li>
<li> background: #2074a0; </li>
<li>} </li>
<li>.container .mybody .trousers .trousers_top { </li>
<li> width: 160px; </li>
<li> height: 60px; </li>
<li> background: #2074a0; </li>
<li> position: absolute; </li>
<li> bottombottom: 100px; </li>
<li> left: 0; </li>
<li> rightright: 0; </li>
<li> margin: 0 auto; </li>
<li> border: 6px solid #000; </li>
<li> border-bottom: none; </li>
<li>} </li>
<li>.container .mybody .trousers .pocket { </li>
<li> width: 60px; </li>
<li> height: 45px; </li>
<li> border: 6px solid #000; </li>
<li> border-radius: 0 0 25px 25px; </li>
<li> left: 0; </li>
<li> rightright: 0; </li>
<li> margin: 0 auto; </li>
<li> position: absolute; </li>
<li> bottombottom: 65px; </li>
<li>} </li>
<li>.container .mybody .trousers .line-left, </li>
<li>.container .mybody .trousers .line-rightright { </li>
<li> width: 30px; </li>
<li> height: 30px; </li>
<li> border-bottom-rightright-radius: 100px; </li>
<li> border-right: 6px solid; </li>
<li> border-bottom: 6px solid; </li>
<li> position: absolute; </li>
<li> top: 10px; </li>
<li>} </li>
<li>.container .mybody .trousers .line-rightright { </li>
<li> rightright: 0; </li>
<li> -webkit-transform: rotate(75deg); </li>
<li> -moz-transform: rotate(75deg); </li>
<li> -o-transform: rotate(75deg); </li>
<li> transform: rotate(75deg); </li>
<li> -ms-transform: rotate(75deg); </li>
<li>} </li>
<li>.container .mybody .trousers .line-bottombottom { </li>
<li> height: 40px; </li>
<li> border: 3px solid #000; </li>
<li> left: 118px; </li>
<li> position: absolute; </li>
<li> bottombottom: 0; </li>
<li> border-radius: 3px; </li>
<li>} </li>
<li>.container .mybody .trousers .condoleBelt { </li>
<li> position: absolute; </li>
<li>} </li>
<li>.container .mybody .trousers .condoleBelt .left, </li>
<li>.container .mybody .trousers .condoleBelt .rightright { </li>
<li> width: 100px; </li>
<li> height: 16px; </li>
<li> border: 5px solid #000; </li>
<li> background: #2074a0; </li>
<li> top: -90px; </li>
<li> position: absolute; </li>
<li>} </li>
<li>.container .mybody .trousers .condoleBelt .left:after, </li>
<li>.container .mybody .trousers .condoleBelt .rightright:after { </li>
<li> content: ''; </li>
<li> background: #000; </li>
<li> width: 8px; </li>
<li> height: 8px; </li>
<li> border-radius: 50%; </li>
<li> position: absolute; </li>
<li> top: 3px; </li>
<li>} </li>
<li>.container .mybody .trousers .condoleBelt .left { </li>
<li> left: -35px; </li>
<li> transform: rotate(45deg); </li>
<li>} </li>
<li>.container .mybody .trousers .condoleBelt .left:after { </li>
<li> rightright: 3px; </li>
<li>} </li>
<li>.container .mybody .trousers .condoleBelt .rightright { </li>
<li> transform: rotate(-45deg); </li>
<li> left: 165px; </li>
<li>} </li>
<li>.container .mybody .trousers .condoleBelt .rightright:after { </li>
<li> left: 3px; </li>
<li>} </li>
<li>.container .hairs { </li>
<li> position: relative; </li>
<li>} </li>
<li>.container .hairs .hairs_one { </li>
<li> width: 130px; </li>
<li> height: 100px; </li>
<li> border-top: 8px solid #000; </li>
<li> position: absolute; </li>
<li> transform: rotate(35deg); </li>
<li> left: 24px; </li>
<li> top: -17px; </li>
<li> border-radius: 50%; </li>
<li> animation: hairs 2s ease-in-out infinite; </li>
<li>} </li>
<li>.container .hairs .hairs_two { </li>
<li> width: 80px; </li>
<li> height: 80px; </li>
<li> border-top: 6px solid #000; </li>
<li> position: absolute; </li>
<li> transform: rotate(15deg); </li>
<li> left: 50px; </li>
<li> top: -10px; </li>
<li> border-radius: 50%; </li>
<li>} </li>
<li>.container .eyes { </li>
<li> position: relative; </li>
<li> z-index: 3; </li>
<li>} </li>
<li>.container .eyes .eye_left, </li>
<li>.container .eyes .eye_right { </li>
<li> width: 85px; </li>
<li> height: 85px; </li>
<li> border: 6px solid #000; </li>
<li> border-radius: 50%; </li>
<li> background: #fff; </li>
<li> position: absolute; </li>
<li> top: 60px; </li>
<li>} </li>
<li>.container .eyes .eye_left:after, </li>
<li>.container .eyes .eye_right:after { </li>
<li> content: ''; </li>
<li> width: 28px; </li>
<li> height: 18px; </li>
<li> background: #000; </li>
<li> position: absolute; </li>
<li> top: 40%; </li>
<li>} </li>
<li>.container .eyes .eye_left { </li>
<li> left: 27px; </li>
<li>} </li>
<li>.container .eyes .eye_left:after { </li>
<li> left: -30px; </li>
<li> transform: rotate(7deg) skewX(20deg); </li>
<li>} </li>
<li>.container .eyes .eye_right { </li>
<li> left: 124px; </li>
<li>} </li>
<li>.container .eyes .eye_right:after { </li>
<li> rightright: -32px; </li>
<li> transform: rotate(-7deg) skewX(-20deg); </li>
<li>} </li>
<li>.container .eyes .black { </li>
<li> width: 40px; </li>
<li> height: 40px; </li>
<li> background: #000; </li>
<li> border-radius: 50%; </li>
<li> position: absolute; </li>
<li> top: 24px; </li>
<li> left: 22px; </li>
<li> animation: eys_black 5s ease-in-out infinite; </li>
<li>} </li>
<li>.container .eyes .white { </li>
<li> width: 20px; </li>
<li> height: 20px; </li>
<li> background: #fff; </li>
<li> border-radius: 50%; </li>
<li> position: absolute; </li>
<li> top: 10px; </li>
<li> left: 10px; </li>
<li> animation: eys_white 5s ease-in-out infinite; </li>
<li>} </li>
<li>.container .mouth { </li>
<li> position: relative; </li>
<li> z-index: 3; </li>
<li>} </li>
<li>.container .mouth .mouth_box { </li>
<li> position: absolute; </li>
<li> width: 55px; </li>
<li> height: 35px; </li>
<li> border: 5px solid #000; </li>
<li> background: #fff; </li>
<li> top: 170px; </li>
<li> left: 90px; </li>
<li> border-bottom-left-radius: 30px; </li>
<li> transform: rotate(-35deg); </li>
<li> animation: mouth_box 5s ease-in-out infinite; </li>
<li>} </li>
<li>.container .mouth .mouth_box:after { </li>
<li> background: #f9d946; </li>
<li> width: 70px; </li>
<li> height: 32px; </li>
<li> content: ''; </li>
<li> position: absolute; </li>
<li> border-bottom: 5px solid #000; </li>
<li> transform: rotate(35deg); </li>
<li> top: -14px; </li>
<li> left: 6px; </li>
<li> animation: mouth_after 5s ease-in-out infinite; </li>
<li>} </li>
<li>.container .hands { </li>
<li> position: relative; </li>
<li> z-index: 1; </li>
<li>} </li>
<li>.container .hands .left_hand, </li>
<li>.container .hands .right_hand { </li>
<li> width: 80px; </li>
<li> height: 80px; </li>
<li> border: 6px solid #000; </li>
<li> transform: rotate(40deg); </li>
<li> position: absolute; </li>
<li> background: #f9d946; </li>
<li> border-radius: 30px; </li>
<li> top: 220px; </li>
<li> animation: left_hand 1s ease-in-out infinite; </li>
<li>} </li>
<li>.container .hands .left_hand { </li>
<li> left: -24px; </li>
<li>} </li>
<li>.container .hands .left_hand:after { </li>
<li> width: 6px; </li>
<li> border: 3px solid #000; </li>
<li> position: absolute; </li>
<li> content: ''; </li>
<li> transform: rotate(90deg); </li>
<li> bottombottom: 26px; </li>
<li> left: 12px; </li>
<li>} </li>
<li>.container .hands .right_hand { </li>
<li> rightright: 26px; </li>
<li>} </li>
<li>.container .hands .right_hand:after { </li>
<li> width: 6px; </li>
<li> border: 3px solid #000; </li>
<li> position: absolute; </li>
<li> content: ''; </li>
<li> top: 20px; </li>
<li> rightright: 18px; </li>
<li>} </li>
<li>.container .foot { </li>
<li> position: relative; </li>
<li>} </li>
<li>.container .foot .left_foot, </li>
<li>.container .foot .right_foot { </li>
<li> width: 36px; </li>
<li> height: 50px; </li>
<li> background: #000; </li>
<li> position: absolute; </li>
<li> top: 400px; </li>
<li>} </li>
<li>.container .foot .left_foot:after, </li>
<li>.container .foot .right_foot:after { </li>
<li> width: 60px; </li>
<li> height: 35px; </li>
<li> position: absolute; </li>
<li> bottombottom: 0; </li>
<li> content: ''; </li>
<li> background: #000; </li>
<li>} </li>
<li>.container .foot .left_foot { </li>
<li> left: 86px; </li>
<li> animation: left_foot 1s ease-in-out infinite; </li>
<li>} </li>
<li>.container .foot .left_foot:after { </li>
<li> rightright: 0; </li>
<li> top: 20px; </li>
<li> border-radius: 30px 0 10px 20px; </li>
<li>} </li>
<li>.container .foot .right_foot { </li>
<li> left: 128px; </li>
<li> animation: right_foot 1s ease-in-out infinite; </li>
<li>} </li>
<li>.container .foot .right_foot:after { </li>
<li> left: 0; </li>
<li> top: 20px; </li>
<li> border-radius: 0 30px 20px 10px; </li>
<li>} </li>
<li>.container .foot_shadow { </li>
<li> position: absolute; </li>
<li> top: 456px; </li>
<li> width: 240px; </li>
<li> height: 2px; </li>
<li> background: rgba(0, 0, 0, 0.3); </li>
<li> box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3); </li>
<li> border-radius: 50%; </li>
<li>} </li>
<li>@keyframes hairs { </li>
<li> 30% { </li>
<li> transform: rotate(32deg) translate3d(-4px, -2px, 0); </li>
<li> } </li>
<li>} </li>
<li>@keyframes eys_black { </li>
<li> 0% { </li>
<li> transform: translateX(0px); </li>
<li> } </li>
<li> 20%, </li>
<li> 40% { </li>
<li> transform: translateX(15px); </li>
<li> } </li>
<li> 60%, </li>
<li> 100% { </li>
<li> transform: translateX(0px); </li>
<li> } </li>
<li> 80%, </li>
<li> 90% { </li>
<li> transform: translateX(-15px); </li>
<li> } </li>
<li>} </li>
<li>@keyframes eys_white { </li>
<li> 0% { </li>
<li> transform: translateX(0px); </li>
<li> } </li>
<li> 20%, </li>
<li> 40% { </li>
<li> transform: translate3d(3px, 4px, 0px); </li>
<li> } </li>
<li> 60% { </li>
<li> transform: translate(5px, 5px); </li>
<li> } </li>
<li> 80% { </li>
<li> transform: translateX(0px); </li>
<li> } </li>
<li> 100% { </li>
<li> transform: translateX(0px); </li>
<li> } </li>
<li>} </li>
<li>@keyframes mouth_box { </li>
<li> 40%, </li>
<li> 43% { </li>
<li> width: 45px; </li>
<li> height: 25px; </li>
<li> top: 175px; </li>
<li> } </li>
<li> 0%, </li>
<li> 35%, </li>
<li> 48%, </li>
<li> 100% { </li>
<li> width: 55px; </li>
<li> height: 35px; </li>
<li> top: 170px; </li>
<li> transform: rotate(-35deg); </li>
<li> } </li>
<li>} </li>
<li>@keyframes mouth_after { </li>
<li> 40%, </li>
<li> 43% { </li>
<li> width: 60.5px; </li>
<li> top: -19.3px; </li>
<li> left: 1.5px; </li>
<li> } </li>
<li> 0%, </li>
<li> 35%, </li>
<li> 48%, </li>
<li> 100% { </li>
<li> width: 70px; </li>
<li> top: -16px; </li>
<li> left: 3px; </li>
<li> transform: rotate(33deg); </li>
<li> } </li>
<li>} </li>
<li>@keyframes left_hand { </li>
<li> 0%, </li>
<li> 50%, </li>
<li> 100% { </li>
<li> transform: rotate(40deg); </li>
<li> } </li>
<li> 30% { </li>
<li> transform: rotate(37deg) translateX(1px); </li>
<li> } </li>
<li>} </li>
<li>@keyframes right_foot { </li>
<li> 0%, </li>
<li> 50%, </li>
<li> 100% { </li>
<li> transform: rotate(0deg); </li>
<li> } </li>
<li> 30% { </li>
<li> transform: rotate(-8deg); </li>
<li> } </li>
<li>} </li>
<li>@keyframes left_foot { </li>
<li> 0%, </li>
<li> 50%, </li>
<li> 100% { </li>
<li> transform: rotate(0deg); </li>
<li> } </li>
<li> 80% { </li>
<li> transform: rotate(8deg); </li>
<li> } </li>
<li>} </li>
</ol>
<p>搞定了，没有做浏览器兼容，建议在chrome下浏览，以上就是本文的全部内容，希望对大家的学习有所帮助。</p>
<p>原文：http://www.cnblogs.com/zhangans/p/4883705.html</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/71724.html" title="浅谈各种浏览器下的CSS Hack兼容性写法">浅谈各种浏览器下的CSS Hack兼容性写法</a></p>
<p>下一篇：<a href="/3g/1/71726.html" title="CSS利用伪元素实现导航栏斜线分隔">CSS利用伪元素实现导航栏斜线分隔</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604673.html"><ul>微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键<br><br>几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。<br>在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。</ul></a></div>
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>