代码画年兽，不依赖图片，纯CSS33代码教会你画可爱的小老虎，可以动起来的小老虎：
实现效果：
HTML代码：
<!--
* @Author: longerJue
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>#Codepenchallenge: Cute Tiger</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/><linkrel="stylesheet"href="css/style.css"/></head><body><divclass="container"><divclass="tigre"><divclass="body"><divclass="cola"></div><divclass="cola3"></div><divclass="body7"></div><divclass="body5"><divclass="ray"></div></div><divclass="legs"></div><divclass="ray3"></div><divclass="ray5"></div><divclass="legs3"></div></div><divclass="head"><divclass="orejas"></div><divclass="orejas3"></div><divclass="face"></div><divclass="face3"><divclass="rayas"><spanclass="r1"></span><spanclass="r2"></span><spanclass="r3"></span><spanclass="r4"></span><spanclass="r5"></span><spanclass="r6"></span><spanclass="r7"></span><spanclass="r8"></span></div><divclass="cejas"></div><divclass="cejas3"></div><divclass="cejas7"></div><divclass="ojos"><divclass="iris"><divclass="iris3"></div></div></div><divclass="ojos3"><divclass="iris7"><divclass="iris9"></div></div></div><divclass="boca7"></div><divclass="boca"></div><divclass="boca3"></div><divclass="bigotes"></div><divclass="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}}
这只小老虎可爱吧，他还会眨眼睛呢！你也赶快来试一试吧！
本文转载自: https://blog.csdn.net/xiaoge_586/article/details/122579471
版权归原作者 longerJue 所有， 如有侵权，请联系我们删除。
版权归原作者 longerJue 所有， 如有侵权，请联系我们删除。