CSS3小黄人效果代码实例

发布时间:2020-06-25 02:24:18发布者:admin浏览数:

小黄人是一个可爱的卡通形象,下面就分享一个使用css3实现的小黄人效果。

感兴趣的朋友可以自己分析一下,是一个学习熟练css3各个属性用法的好的方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>* { margin: 0; padding: 0; box-sizing: border-box;}.clearfix { overflow: hidden; clear: both; zoom: 1;}.fr { float: right;}.fl { float: left;}ul, li, ol { list-style: none;}.bodyH { width: 225px; height: 365px; border: 5px solid #000; border-radius: 100px; margin: 100px auto; background: #F9D946; position: relative;}.trousers { position: absolute; width: 100%; height: 200px; bottom: 0; overflow: hidden; border-radius: 0 0 95px 95px;}.trousers .one { position: absolute; bottom: 0; width: 100%; height: 100px; border-top: 5px solid #000; background: #2074A0;}.trousers .two { width: 150px; height: 55px; border: 5px solid #000; border-bottom-color: #2074A0; position: absolute; background: #2074A0; bottom: 95px; left: 33px;}.trousers .three { position: absolute; width: 70px; height: 56px; border-radius: 0 0 30px 30px; border: 5px solid #000; bottom: 60px; left: 73px;}.trousers .lineL, .trousers .lineR { width: 30px; height: 30px; display: inline-block; position: absolute; left: 0; bottom: 50px; border-bottom: 5px solid #000; border-right: 5px solid #000; border-radius: 0 0 30px 0;}.trousers .lineR { left: auto; right: 0px; border-bottom: 5px solid #000; border-right: 0; border-left: 5px solid #000; border-radius: 0 0 0 30px;}.trousers .lineC { display: inline-block; width: 5px; height: 35px; background: #000; position: absolute; bottom: 0; left: 50%; margin-left: -1.5px;}.trousers .beidai { position: absolute; width: 225px; height: 100px; left: 0; top: 0; overflow-x: hidden;}.trousers .beidaiL, .trousers .beidaiR { position: absolute; display: inline-block; width: 20px; height: 100px; background: #2074A0; border: 3px solid #000; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); top: -13px; left: 10px;}.trousers .beidaiR { left: auto; right: 22px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); top: -12px;}.trousers .beidaiL:before, .trousers .beidaiR:before { content: ""; display: block; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #000; bottom: 5px; left: 5px;}.eyes { width: 100%; height: 100px; position: absolute; top: 50px; padding-left: 15px;}.eyeL, .eyeR { width: 90px; height: 90px; background: #fff; border: 4px solid #000; border-radius: 50%; position: relative;}.eyeL span, .eyeR span { display: inline-block; width: 40px; height: 40px; position: absolute; border-radius: 50%; background: #000; left: 20px; bottom: 10px;}.eyeL span i, .eyeR span i { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: inline-block; position: absolute; bottom: 7px; left: 10px;}.eyeL:after, .eyeR:after { content: ""; display: block; position: absolute; width: 20px; height: 15px; background: #000; left: -21px; top: 36px; -webkit-transform: skewX(-4deg) rotate(7deg); -moz-transform: skewX(-4deg) rotate(7deg);}.eyeR:after { left: auto; right: -26px; -webkit-transform: skewX(3deg) rotate(-7deg); -moz-transform: skewX(3deg) rotate(-7deg); width: 25px;}.eyeL span, .eyeR span { animation: myEyes 3s ease-in-out infinite; -webkit-animation: myEyes 3s ease-in-out infinite; -moz-animation: myEyes 2s3s ease-in-out infinite; -o-animation: myEyes 3s ease-in-out infinite;}@keyframes myEyes { 0% {} 25% { left: 10px; } 50% { left: 20px; } 75% { left: 30px; } 100% { left: 20px; }}@-webkit-keyframes myEyes { 0% {} 25% { left: 10px; } 50% { left: 20px; } 75% { left: 30px; } 100% { left: 20px; }}@-moz-keyframes myEyes { 0% {} 25% { left: 10px; } 50% { left: 20px; } 75% { left: 30px; } 100% { left: 20px; }}@-o-keyframes myEyes { 0% {} 25% { left: 10px; } 50% { left: 20px; } 75% { left: 30px; } 100% { left: 20px; }}.eyeL span i, .eyeR span i { animation: eyeball 3s ease-in-out infinite; -webkit-animation: eyeball 3s ease-in-out infinite; -moz-animation: eyeball 3s ease-in-out infinite; -o-animation: eyeball 3s ease-in-out infinite;}@keyframes eyeball { 0% {} 25% { bottom: 4px; left: 5px; } 50% {} 75% { bottom: 13px; left: 15px; } 100% {}}@-webkit-keyframes eyeball { 0% {} 25% { bottom: 4px; left: 5px; } 50% { bottom: 7px; left: 10px; } 75% { bottom: 13px; left: 15px; } 100% {}} .mouth { position: absolute; width: 40px; height: 50px; border-bottom: 3px solid #000; border-right: 3px solid #000; top: 137px; left: 90px; background: #fff; border-radius: 15px 0 15px 0; -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); overflow: hidden;}.mouth .layer { width: 70px; height: 44px; border-bottom: 3px solid #000; background: #f00; position: absolute; left: -28px; bottom: 17px; -webkit-transform: rotate(-50deg); -moz-transform: rotate(-50deg); background: #F9D946;}.foot { width: 200px; height: 100px; position: absolute; bottom: -78px; left: 50%; margin-left: -100px; padding-left: 17px; z-index: -1;}.foot .c { width: 40px; height: 80px; border-radius: 5px; background: #000; position: absolute; overflow: auto; right: 0;}.foot .p { position: absolute; width: 80px; height: 40px; border-radius: 30px 0 5px 15px; right: 0; bottom: 0; background: #000;}.foot .c1 { right: auto; left: 0;}.foot .p1 { right: auto; left: 0; border-radius: 0 30px 15px 5px;}.footL, .footR { width: 80px; height: 80px; position: relative; margin-right: 8px;}.footL { animation: foot1 2s ease-in-out infinite;}.footR { animation: foot2 2s ease-in-out infinite;}@keyframes foot1 { 0%,100% {} 50% { transform: rotateY(50deg) rotateZ(-20deg); }}@keyframes foot2 { 0%,100% { transform: rotateY(-50deg) rotateZ(20deg); } 50% { transform: rotateY(0deg) rotateZ(0deg); }}.shadow { width: 210px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.3); position: absolute; left: 0; bottom: 14px; left: -5px;}.hands {}.hands .handL, .hands .handR { width: 80px; height: 80px; background: #F9D946; border: 5px solid #000; border-radius: 25px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); left: -32px; top: 187px; position: absolute; z-index: -1; animation: gb 1s ease-in-out infinite; -webkit-animation: gb 1s ease-in-out infinite; -moz-animation: gb 1s ease-in-out infinite; -o-animation: gb 1s ease-in-out infinite;}@keyframes gb { 0%,49%,100% {} 50% { transform: rotate(35deg); }}.hands .handR { left: auto; right: -32px;}.hands .handL:before, .hands .handR:before { content: ""; display: block; position: absolute; width: 7px; height: 15px; background: #000; border-radius: 30px; transform: rotate(-6deg); -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); z-index: 1; left: 20px; top: 37px;}.hands .handR:before { left: auto; right: 20px; top: 20px; transform: rotate(-84deg); -webkit-transform: rotate(-84deg); -moz-transform: rotate(-84deg);}.hair1, .hair2 { width: 150px; height: 120px; border-radius: 100px; border-top: 10px solid #000; position: absolute; top: -14px; left: 0px; transform: rotate(33deg); -webkit-transform: rotate(33deg); -moz-transform: rotate(33deg); -o-transform: rotate(33deg); z-index: -1;}.hair2 { width: 100px; height: 150px; left: 10px;}.hair1 { animation: hair 2s ease-in-out infinite; -webkit-animation: hair 2s ease-in-out infinite; -moz-animation: hair 2s ease-in-out infinite; -o-animation: hair 2s ease-in-out infinite;}@keyframes hair { 0%,25%,31%,100% {} 30% { transform: rotate(19deg); -webkit-transform: rotate(19deg); -moz-transform: rotate(19deg); -o-transform: rotate(19deg); }}@-webkit-keyframes hair { 0%,25%,31%,100% {} 30% { transform: rotate(19deg); -webkit-transform: rotate(19deg); -moz-transform: rotate(19deg); -o-transform: rotate(19deg); }}@-moz-keyframes hair { 0%,25%,31%,100% {} 30% { transform: rotate(19deg); -webkit-transform: rotate(19deg); -moz-transform: rotate(19deg); -o-transform: rotate(19deg); }}@-o-keyframes hair { 0%,25%,31%,100% {} 30% { transform: rotate(19deg); -webkit-transform: rotate(19deg); -moz-transform: rotate(19deg); -o-transform: rotate(19deg); }}</style></head><body> <p class="bodyH"> <p class="trousers"> <p class="one"> </p> <p class="two"> </p> <p class="three"> </p> <span class="lineL"></span> <span class="lineC"></span> <span class="lineR"></span> <p class="beidai"> <span class="beidaiL"></span> <span class="beidaiR"></span> </p> </p> <p class="eyes"> <p class="eyeL fl"> <span><i></i></span> </p> <p class="eyeR fl"> <span><i></i></span> </p> </p> <p class="mouth"> <p class="layer"></p> </p> <p class="foot"> <p class="footL fl"> <p class="c"></p> <p class="p"></p> </p> <p class="footR fl"> <p class="c c1"></p> <p class="p p1"></p> </p> <p class="shadow"></p> </p> <p class="hands"> <p class="handL"></p> <p class="handR"></p> </p> <p class="hair"> <span class="hair1"></span> <span class="hair2"></span> </p> </p></body></html>

  网站建设分类
程序开发 |  系统教程 |  软件应用 |  图形图像 |  网络应用 |  站长教程 |  网站建设 |  视频教程 |  硬件维护 |  IT资讯 |  中国it动力网
本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件!
如侵犯到您的权益,请及时通知我们,我们会及时处理。
Copyright @ 2019 中国it动力网 网站导航