代码画年兽，虎年祝大家虎虎生威

代码画年兽，不依赖图片，纯CSS33代码教会你画可爱的小老虎，可以动起来的小老虎：
实现效果：

HTML代码：

<!--* @Author:
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>#Codepenchallenge: Cute Tiger</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/><link rel="stylesheet" href="css/style.css" /></head><body><div class="container"><div class="tigre"><div class="body"><div class="cola"></div><div class="cola3"></div><div class="body7"></div><div class="body5"><div class="ray"></div></div><div class="legs"></div><div class="ray3"></div><div class="ray5"></div><div class="legs3"></div></div><div class="head"><div class="orejas"></div><div class="orejas3"></div><div class="face"></div><div class="face3"><div class="rayas"><span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span><span class="r5"></span><span class="r6"></span><span class="r7"></span><span class="r8"></span></div><div class="cejas"></div><div class="cejas3"></div><div class="cejas7"></div><div class="ojos"><div class="iris"><div class="iris3"></div></div></div><div class="ojos3"><div class="iris7"><div class="iris9"></div></div></div><div class="boca7"></div><div class="boca"></div><div class="boca3"></div><div class="bigotes"></div><div class="bigotes3"></div></div></div></div></div></body>
</html>

CSS3代码：

body{background:black;
}
.container{position:relative;width:800px;height:600px;background:#24292E;margin:0px auto;}
.tigre{position:absolute;margin:271px 350px
}
.face{position:absolute;width:251px;height:172px;border-radius: 90px ;background:#D8D3D6;margin:-90px -90px;}
.face::before{content:"";position:absolute;width:152px;height:152px;border-radius:700px 700px 5000px 700px;background:#D8D3D6;-webkit-transform:rotate(225deg);transform:rotate(225deg);margin:30px 55px
}
.face3{position:absolute;width: 231px;height: 182px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:#e4393c;margin:-102px -80px;
}
.face3::before{content:"";position:absolute;width:90px;height:90px;border-radius:700px 700px 5000px 700px;background:#e4393c;-webkit-transform:rotate(225deg);transform:rotate(225deg);margin:95px 73px
}
.face5{position:absolute;width:152px;height:132px;border-radius:100%;background:#eda65e;margin:40px 40px;
}
.orejas,.orejas3{position:absolute;width:60px;height:65px;border-radius:100%;background:#fff;border:12px solid #e4393c;}
.orejas{margin:-121px -83px}
.orejas3{margin:-121px 63px}
.ojos,.ojos3{position:absolute;width: 90px;height: 80px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:#937B54;border-top:7px solid black;-webkit-animation: cerrar 3s alternate infinite;animation: cerrar 3s alternate infinite;}
.ojos{margin:70px 12px;border-left:7px solid black;
}
.ojos3{margin:70px 121px;border-right:7px solid black;
}
.ojos::before, .ojos3::before{content:"";position:absolute;width: 80px;height: 60px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:#C99621;}
.ojos::before{margin:17px 3px}
.ojos3::before{margin:17px 8px}
.iris,.iris7{position:absolute;width: 63px;height: 77px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:black;margin:0 14px
}
.iris{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}
.iris7{-webkit-transform:rotate(12deg);transform:rotate(12deg)}
.iris::before,.iris7::before{content:"";position:absolute;width:35px;height:50px;border-radius:100%;background:white;
}
.iris::before{-webkit-transform:rotate(33deg);transform:rotate(33deg);margin:0px 5px
}
.iris7::before{-webkit-transform:rotate(-33deg);transform:rotate(-33deg);margin:0px 23px
}
.iris3,.iris9{position:absolute;width:14px;height:12px;border-radius:100%;background:white;margin:62px 30px}
.iris3::before,.iris9::before{content:"";position:absolute;width: 80px;height:35px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;opacity:.3;background: #937B54;}
.iris3::before{margin:-60px -30px;-webkit-transform:rotate(33deg);transform:rotate(33deg)
}
.iris9::before{margin:-60px -49px;-webkit-transform:rotate(-33deg);transform:rotate(-33deg)
}
.boca{position:absolute;width:21px;height:21px;border-radius:100%;background:#eaeaea;margin:152px 95px;-webkit-animation:go7 2.1s alternate infinite;animation:go7 2.1s alternate infinite;
}
.boca::before{content:"";position:absolute;width:21px;height:21px;border-radius:100%;background:#eaeaea;margin:0px 21px
}
.boca3{position:absolute;width: 18px;height: 16px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:#8c4b59;margin:145px 107px;
}
.boca7{position:absolute;width:21px;height:12px;border-radius:0 0 21px 21px;background:#8c4b59;border:1px solid black;margin:162px 105px;}
.cejas{position:absolute;width:25px;height:12px;border-radius:100%;background:black;margin:50px 35px;-webkit-transform:rotate(-21deg);transform:rotate(-21deg)
}
.cejas::before{content:"";position:absolute;width:25px;height:12px;border-radius:100%;background:black;margin:50px 125px;-webkit-transform:rotate(42deg);transform:rotate(42deg)
}
.cejas3,.cejas7{position:absolute;width:21px;height:21px;border-radius:100%;}
.cejas3{border-bottom:5px solid black;margin:63px 12px;
}
.cejas7{border-bottom:5px solid black;margin:63px 195px;
}
.cejas3::before,.cejas7::before{content:"";position:absolute;width:21px;height:21px;border-radius:100%;border-bottom:5px solid black;}
.cejas3::before{margin:9px -3px;-webkit-transform:rotate(-30deg);transform:rotate(-30deg)
}
.cejas7::before{margin:9px 0px;-webkit-transform:rotate(21deg);transform:rotate(21deg)
}
.bigotes,.bigotes3{position:absolute;width:35px;height:1px;background: black;-webkit-animation:go7 2.1s alternate infinite;animation:go7 2.1s alternate infinite;}
.bigotes{margin:162px 73px;}
.bigotes3{margin:162px 123px;}
.bigotes::before,.bigotes3::before{content:"";position:absolute;width:35px;height:1px;background:black;}
.bigotes::before{margin:7px 3px;-webkit-transform:rotate(-21deg);transform:rotate(-21deg)}
.bigotes3::before{margin:7px -3px;-webkit-transform:rotate(21deg);transform:rotate(21deg)}
.body5{position:absolute;width:95px;height:95px;border-radius:100%;background:#f4b09f;margin:80px -21px
}
.body7{position:absolute;width:60px;height:102px;border-radius:100%;background:#B94535; margin:77px -45px}
.body7::before{content:"";position:absolute;width:65px;height:102px;border-radius:100%;background:#B94535; margin:0px 105px}.legs,.legs3{position:absolute;width: 90px;height: 150px;border-top: 40px solid #e4393c;border-left: 40px solid transparent;border-right: 40px solid transparent;border-radius: 100px / 100px;}
.legs{-webkit-transform: rotate(85deg);transform: rotate(85deg);margin:30px -75px
}
.legs3{-webkit-transform: rotate(-85deg);transform: rotate(-85deg);margin:30px -12px;
}
.legs::before, .legs3::before{content:"";position:absolute;width:33px;height:50px;border-radius: 100%;background:#e4393c;}
.legs::before{margin:-21px 77px}
.legs3::before{margin:-21px -19px}
.legs7::before{content:"";position:absolute;width:33px;height:21px;border-radius: 0 0 50px 50px;background:#cc9666;margin:1px 87px}
.cola{position:absolute;width:25px;height:125px;border-radius:30px;background:#e4393c;margin:50px -55px;-webkit-transform:rotate(-21deg);transform:rotate(-21deg);
}
.cola3{position:absolute;width:35px;height:35px;border-radius:100%;background:#e4393c; border-right:1px solid gray;margin:50px -90px;-webkit-animation:go3 3s alternate infinite;animation:go3 3s alternate infinite;
}
.r1,.r2,.r3{position:absolute;width:7px;height:35px;border-radius:3px;background:black
}
.r1{margin:3px 93px}
.r2{margin:5px 112px}
.r3{margin:3px 132px}
.r4,.r5,.r6,.r7,.r8{position:absolute;width:21px;height:5px;border-radius:3px;background:black;}
.r4{margin:70px 9px}
.r5{margin:70px 201px}
.r6{margin:50px 107px}
.r7{margin:162px 50px;-webkit-transform:rotate(-12deg);transform:rotate(-12deg)
}
.r8{margin:162px 162px;-webkit-transform:rotate(12deg);transform:rotate(12deg)
}
.ray{position:absolute;width:21px;height:12px;border-top:3px solid black;border-bottom:3px solid black;margin:45px 50px;z-index:333;}
.ray::before{content:"";position:absolute;width:9px;height:21px;border-radius:100%;border-left:3px solid black;margin:-30px -80px;-webkit-transform:rotate(50deg);transform:rotate(50deg);z-index:333;}
.ray::after{content:"";position:absolute;width:9px;height:21px;border-radius:100%;border-left:3px solid black;margin:-45px -85px;-webkit-transform:rotate(60deg);transform:rotate(60deg);z-index:333;}
.ray3,.ray5{position:absolute;width:33px;height:30px;border-radius:100%;border-top:5px solid black;z-index:777;}
.ray3{margin:121px -16px;}
.ray5{margin:121px 65px;}
.ray3::before,.ray5::before{content:"";position:absolute;width:33px;height:30px;border-radius:100%;border-top:5px solid black;z-index:777;}
.ray3:after,.ray5::after{content:"";position:absolute;width:21px;height:9px;border-radius:100%;border-top:5px solid black;z-index:777;}
.ray3::before{margin:12px 0px;}
.ray3::after{margin:9px -25px;}
.ray5::before{margin:12px 0px;}
.ray5::after{ margin:9px 37px;}@-webkit-keyframes go {0%{-webkit-transform:translatex(0px) translatey(0px);transform:translatex(0px) translatey(0px) }100% {-webkit-transform:translatex(3px) translatey(3px);transform:translatex(3px) translatey(3px) }}@keyframes go {0%{-webkit-transform:translatex(0px) translatey(0px);transform:translatex(0px) translatey(0px) }100% {-webkit-transform:translatex(3px) translatey(3px);transform:translatex(3px) translatey(3px) }}
@-webkit-keyframes go3 {0%{-webkit-transform:translatex(0px) translatey(0px) scale(1);transform:translatex(0px) translatey(0px) scale(1)}100% {-webkit-transform:translatex(-3px) translatey(-12px) scale(.9);transform:translatex(-3px) translatey(-12px) scale(.9)}}
@keyframes go3 {0%{-webkit-transform:translatex(0px) translatey(0px) scale(1);transform:translatex(0px) translatey(0px) scale(1)}100% {-webkit-transform:translatex(-3px) translatey(-12px) scale(.9);transform:translatex(-3px) translatey(-12px) scale(.9)}}
@-webkit-keyframes go7{0%{-webkit-transform:translatey(0px);transform:translatey(0px) }100% {-webkit-transform:translatey(-5px);transform:translatey(-5px)}}
@keyframes go7{0%{-webkit-transform:translatey(0px);transform:translatey(0px) }100% {-webkit-transform:translatey(-5px);transform:translatey(-5px)}}
@-webkit-keyframes cerrar {0%,25%{opacity:1}35%{opacity: 0}50%{opacity:1;}100%{opacity:1}
}
@keyframes cerrar {0%,25%{opacity:1}35%{opacity: 0}50%{opacity:1;}100%{opacity:1}
}

这只小老虎可爱吧，他还会眨眼睛呢！你也赶快来试一试吧！

代码画年兽，虎年祝大家虎虎生威相关推荐

【你会用代码画年兽吗】20行代码使用JS实现虎年春节倒计时 —— 红红火火过虎年
我们祝你虎虎生威! 百条春节短信奉送
泡泡网手机频道2月13日欢歌笑语迎新春,今天就是大年三十了.在此,小编祝福各位读者虎年,身体健康.事业有成.财源滚滚,我们的祖国欣欣向荣,昌盛富强虎虎生威.祝福过后,小编也不绕弯子了.在春节这 ...
用Python代码画一个足球（附完整代码）
用Python代码画一个足球(附完整代码) C站举办了世界杯征文活动,本文用Python代码画一个足球. 实现方法介绍本文的绘图工具使用Python的标准库turtle库,无需安装,导入即可使用. ...
python画爱心原理_程序员式优雅表白，教你用python代码画爱心
还能用python代码画爱心?还有这种操作?这是什么原理? 不相信python代码可以画爱心?先来一张效果图来看看效果吧!PyCharm pro Mac-PyCharm pro for Mac( Py ...
python程序爱意_程序员式优雅表白，教你用python代码画爱心
还能用python代码画爱心?还有这种操作?这是什么原理? 不相信python代码可以画爱心?先来一张效果图来看看效果吧!PyCharm pro Mac-PyCharm pro for Mac( Py ...
python代码画皮卡丘_程序员式优雅表白，教你用python代码画爱心
还能用python代码画爱心?还有这种操作?这是什么原理? 不相信python代码可以画爱心?先来一张效果图来看看效果吧! PyCharm pro Mac-PyCharm pro for Mac( P ...
markdown 流程图_Markdown 进阶技能：用代码画流程图（编程零基础也适用）
这篇文章主要介绍流程图基础以写代码的方式画流程图相比于使用画图工具拖拽画图,用代码画图有什么好处? 首先,这种方式非常轻便,无需安装复杂的画图应用.Typora 等多种 Markdown 编辑器 ...
python代码画小狗_程序员教你用代码手绘一只可爱的小狗，正好拿去送给女朋友给她个惊喜...
最近经常在抖音上刷到会画画的大神给小姐姐手绘各种可爱的小动物,非常的哇塞哦~ 作为程序员的我那是羡慕不已啊!我要是学会这招是不是可以尝试给我心仪很久的女神告白了?女神没准会很开心!(好吧,我承认我是舔 ...
神级程序员8000行css代码画出一个蒙娜丽莎，堪比达芬奇！
代码画出的蒙娜丽莎今天逛CODEPEN找HTML5动画案例的时候,偶尔看到一位神级大师的作品,用纯CSS代码画出一副蒙娜丽莎,虽然分辨率不高,但是仍然让我很是震撼,一看代码,整整8000行,基本一行 ...

代码画年兽，虎年祝大家虎虎生威

代码画年兽，虎年祝大家虎虎生威相关推荐

最新文章

热门文章