这篇文章主要介绍了使用css3绘制基本卡通图案的示例分享,不过必须承认,这样做的代码量并不是很少…well,需要的朋友可以参考下
纯HTML+CSS实现阿童木头像
先上最终效果图：
在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴 影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。
纯CSS漫画 * { margin: 0; padding: 0; } .outer-circle { position: absolute; top: 32px; left: 44px; width: 289px; height: 289px; border: 4px solid #75BD4F; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .inner-circle { position: relative; width: 269px; height: 269px; border: 10px solid #F5F910; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #73BF43; } .inner-circle p { position: absolute; } .inner-circle-light { top: 41px; left: 35px; -moz-box-shadow: 26px 26px 29px 37px #fff; -webkit-box-shadow: 26px 26px 29px 37px #fff; box-shadow: 26px 26px 29px 37px #fff; } .header-top { top: 11px; rightright: 2px; z-index: 100; width: 180px; height: 90px; -moz-border-radius: 90px 90px 0 0; -webkit-border-radius: 90px 90px 0 0; border-radius: 90px 90px 0 0; background-color: #000; -moz-transform: rotate(32deg); -ms-transform: rotate(32deg); -o-transform: rotate(32deg); -webkit-transform: rotate(32deg); transform: rotate(32deg); } .header-left { top: -20px; left: 37px; width: 114px; height: 228px; -moz-border-radius: 228px 0 0 228px; -webkit-border-radius: 228px 0 0 228px; border-radius: 228px 0 0 228px; background-color: #000; -moz-transform: rotate(26deg); -ms-transform: rotate(26deg); -o-transform: rotate(26deg); -webkit-transform: rotate(26deg); transform: rotate(26deg); } .hair-left-1 { top: 15px; left: 53px; z-index: 55; width: 85px; height: 23px; -webkit-border-top-left-radius: 30px 180px; border-top-left-radius: 30px 180px; -webkit-border-bottom-left-radius: 30px 80px; border-bottom-left-radius: 30px 80px; background-color: #000; -moz-transform: rotate(-74deg) skew(-42deg, 23deg); -ms-transform: rotate(-74deg) skew(-42deg, 23deg); -o-transform: rotate(-74deg) skew(-42deg, 23deg); -webkit-transform: rotate(-74deg) skew(-42deg, 23deg); transform: rotate(-74deg) skew(-42deg, 23deg); } .hair-left-2 { top: -20px; left: 99px; z-index: 60; width: 49px; height: 37px; background-color: #000; -moz-transform: rotate(-51deg) skew(-43deg, 0deg); -ms-transform: rotate(-51deg) skew(-43deg, 0deg); -o-transform: rotate(-51deg) skew(-43deg, 0deg); -webkit-transform: rotate(-51deg) skew(-43deg, 0deg); transform: rotate(-51deg) skew(-43deg, 0deg); } .hair-rightright-1 { top: 70px; rightright: 1px; z-index: 60; width: 81px; height: 85px; -webkit-border-top-rightright-radius: 26px 120px; border-top-rightright-radius: 26px 120px; background-color: black; -moz-transform: rotate(1deg) skew(-51deg, 0deg); -ms-transform: rotate(1deg) skew(-51deg, 0deg); -o-transform: rotate(1deg) skew(-51deg, 0deg); -webkit-transform: rotate(1deg) skew(-51deg, 0deg); transform: rotate(1deg) skew(-51deg, 0deg); } .hair-rightright-2 { width: 60px; height: 10px; -webkit-border-bottom-left-radius: 100%; border-bottom-left-radius: 100%; background-color: rgba(0,0,0,0.2); } .hair-light-1 { top: 30px; rightright: 45px; z-index: 105; width: 57px; height: 17px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background-color: white; -moz-transform: rotate(39deg); -ms-transform: rotate(39deg); -o-transform: rotate(39deg); -webkit-transform: rotate(39deg); transform: rotate(39deg); } .hair-light-1-over { top: 32px; rightright: 38px; z-index: 105; width: 83px; height: 21px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background-color: black; -moz-transform: rotate(41deg); -ms-transform: rotate(41deg); -o-transform: rotate(41deg); -webkit-transform: rotate(41deg); transform: rotate(41deg); } .hair-light-2 { top: 16px; rightright: 104px; z-index: 105; width: 4px; height: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background-color: white; -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); } .ear { top: 141px; rightright: 36px; z-index: 110; width: 49px; height: 48px; border: 2px solid #000; border-bottom-width: 1px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #F6C6B0; -moz-box-shadow: -4px 0 0 0 #de9876 inset; -webkit-box-shadow: -4px 0 0 0 #de9876 inset; box-shadow: -4px 0 0 0 #de9876 inset; -moz-transform: rotate(56deg) scaleY(1.4); -ms-transform: rotate(56deg) scaleY(1.4); -o-transform: rotate(56deg) scaleY(1.4); -webkit-transform: rotate(56deg) scaleY(1.4); transform: rotate(56deg) scaleY(1.4); } .ear-inner-1 { top: 22px; left: 22px; z-index: 70; width: 9px; height: 5px; border-top: 1px solid #110b00; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } .ear-inner-2 { top: 19px; left: 18px; width: 14px; height: 7px; border-top: 2px solid #110b00; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0px 2px 0 0 #de9876 inset; -webkit-box-shadow: 0px 2px 0 0 #de9876 inset; box-shadow: 0px 2px 0 0 #de9876 inset; -moz-transform: rotate(-91deg); -ms-transform: rotate(-91deg); -o-transform: rotate(-91deg); -webkit-transform: rotate(-91deg); transform: rotate(-91deg); } .ear-light { top: 21px; rightright: 34px; z-index: 105; width: 17px; height: 6px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background-color: #FFF; -moz-transform: rotate(89deg); -ms-transform: rotate(89deg); -o-transform: rotate(89deg); -webkit-transform: rotate(89deg); transform: rotate(89deg); } .ear-over { bottombottom: -44px; left: -33px; z-index: 55; width: 69px; height: 59px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #f6c6b0; -moz-transform: rotate(26deg); -ms-transform: rotate(26deg); -o-transform: rotate(26deg); -webkit-transform: rotate(26deg); transform: rotate(26deg); } .face-main { top: 30px; left: 35px; z-index: 50; width: 180px; height: 188px; -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px; background-color: #F6C6B0; -moz-box-shadow: 3px -3px 0 0 #fff inset; -webkit-box-shadow: 3px -3px 0 0 #fff inset; box-shadow: 3px -3px 0 0 #fff inset; } .face-top { top: 61px; rightright: 75px; z-index: 105; width: 111px; height: 46px; -moz-border-radius: 50% 50% 26px 0; -webkit-border-radius: 50% 50% 26px 0; border-radius: 50% 50% 26px 0; background-color: #f6c6b0; -moz-transform: rotate(37deg); -ms-transform: rotate(37deg); -o-transform: rotate(37deg); -webkit-transform: rotate(37deg); transform: rotate(37deg); } .face-rightright-1 { top: 115px; rightright: 71px; z-index: 105; width: 68px; height: 62px; -moz-border-radius: 100% 0 0; -webkit-border-radius: 100% 0 0; border-radius: 100% 0 0; background-color: #f6c6b0; -moz-transform: rotate(99deg); -ms-transform: rotate(99deg); -o-transform: rotate(99deg); -webkit-transform: rotate(99deg); transform: rotate(99deg); } .face-bottombottom-1 { bottombottom: 42px; left: 45px; z-index: 40; width: 72px; height: 52px; -webkit-border-bottom-left-radius: 70px 40px; -webkit-border-top-left-radius: 14px 11px; border-top-left-radius: 14px 11px; border-bottom-left-radius: 70px 40px; background-color: #000; } .face-bottombottom-1-over { bottombottom: 45px; left: 48px; z-index: 55; width: 69px; height: 47px; -webkit-border-bottom-left-radius: 70px 40px; -webkit-border-top-left-radius: 14px 11px; border-top-left-radius: 14px 11px; border-bottom-left-radius: 70px 40px; background-color: #f6c6b0; -moz-box-shadow: 3px 0px 0 0 #fff inset; -webkit-box-shadow: 3px 0px 0 0 #fff inset; box-shadow: 3px 0px 0 0 #fff inset; } .face-bottombottom-2 { rightright: 97px; bottombottom: 44px; z-index: 55; width: 43px; height: 31px; -webkit-border-bottom-rightright-radius: 70px 40px; border-bottom-rightright-radius: 70px 40px; background-color: #000; -moz-transform: rotate(-4deg) skew(-49deg, 0deg); -ms-transform: rotate(-4deg) skew(-49deg, 0deg); -o-transform: rotate(-4deg) skew(-49deg, 0deg); -webkit-transform: rotate(-4deg) skew(-49deg, 0deg); transform: rotate(-4deg) skew(-49deg, 0deg); } .face-bottombottom-2-over { rightright: 99px; bottombottom: 46px; z-index: 56; width: 43px; height: 31px; -webkit-border-bottom-rightright-radius: 70px 40px; border-bottom-rightright-radius: 70px 40px; background-color: #f6c6b0; -moz-box-shadow: -6px 2px 0 0 #de9876 inset; -webkit-box-shadow: -6px 2px 0 0 #de9876 inset; box-shadow: -6px 2px 0 0 #de9876 inset; -moz-transform: rotate(-3deg) skew(-49deg, 0deg); -ms-transform: rotate(-3deg) skew(-49deg, 0deg); -o-transform: rotate(-3deg) skew(-49deg, 0deg); -webkit-transform: rotate(-3deg) skew(-49deg, 0deg); transform: rotate(-3deg) skew(-49deg, 0deg); } .face-light-1 { rightright: 127px; bottombottom: 95px; z-index: 150; width: 6px; height: 6px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #fff; } .face-light-2 { bottombottom: 82px; left: 58px; z-index: 150; width: 4px; height: 4px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #fff; } .chin { bottombottom: 39px; left: 111px; z-index: 70; width: 11px; height: 12px; border: 2px solid #000; border-top-color: #f6c6b0; border-left-color: #f6c6b0; -webkit-border-bottom-rightright-radius: 6px; border-bottom-rightright-radius: 6px; background-color: #f6c6b0; -moz-transform: rotate(34deg) skew(-9deg, 0deg); -ms-transform: rotate(34deg) skew(-9deg, 0deg); -o-transform: rotate(34deg) skew(-9deg, 0deg); -webkit-transform: rotate(34deg) skew(-9deg, 0deg); transform: rotate(34deg) skew(-9deg, 0deg); } .eye-rightright { top: 97px; left: 103px; z-index: 110; width: 39px; height: 67px; border: 1px solid #000; border-top-width: 2px; -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px; -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px; border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px; background-color: #F8FAF7; -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset; -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset; box-shadow: 0px 5px 0 0 #d5d9e2 inset; } .eye-rightright-inner { rightright: 0; bottombottom: 3px; z-index: 115; width: 30px; height: 52px; -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px; -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px; border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px; background-color: #000; } .eye-rightright-light1 { top: 19px; rightright: 0; z-index: 120; width: 19px; height: 10px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background-color: #FFF; -moz-animation: eye-flash 0.2s linear 0.1s infinite normal; -o-animation: eye-flash 0.2s linear 0.1s infinite normal; -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal; -moz-transform: rotate(41deg); -ms-transform: rotate(41deg); -o-transform: rotate(41deg); -webkit-transform: rotate(41deg); transform: rotate(41deg); animation: eye-flash 0.2s linear 0.1s infinite normal; } @-webkit-keyframes eye-flash { 0% { top: 19px; } 100% { top: 21px; } } @-moz-keyframes eye-flash { 0% { top: 19px; } 100% { top: 20px; } } @-ms-keyframes eye-flash { 0% { top: 19px; } 100% { top: 20px; } } @keyframes eye-flash { 0% { top: 19px; } 100% { top: 20px; } } .eye-rightright-light2 { bottombottom: 8px; left: 9px; z-index: 120; width: 14px; height: 7px; -webkit-border-bottom-rightright-radius: 100%; border-bottom-rightright-radius: 100%; background-color: #FFF; -moz-transform: rotate(-39deg); -ms-transform: rotate(-39deg); -o-transform: rotate(-39deg); -webkit-transform: rotate(-39deg); transform: rotate(-39deg); } .eye-rightright-eyelash1 { top: 9px; left: -3px; width: 2px; height: 4px; background-color: #000; -moz-transform: rotate(-54deg); -ms-transform: rotate(-54deg); -o-transform: rotate(-54deg); -webkit-transform: rotate(-54deg); transform: rotate(-54deg); } .eye-rightright-eyelash2 { top: 1px; left: 1px; width: 2px; height: 5px; background-color: #000; -moz-transform: rotate(-33deg); -ms-transform: rotate(-33deg); -o-transform: rotate(-33deg); -webkit-transform: rotate(-33deg); transform: rotate(-33deg); } .eye-rightright-eyelash3 { top: -8px; left: 8px; width: 2px; height: 7px; background-color: #000; -moz-transform: rotate(-21deg); -ms-transform: rotate(-21deg); -o-transform: rotate(-21deg); -webkit-transform: rotate(-21deg); transform: rotate(-21deg); } .eye-rightright-eyelash4 { top: -6px; left: 21px; width: 2px; height: 6px; background-color: #000; -moz-transform: rotate(11deg); -ms-transform: rotate(11deg); -o-transform: rotate(11deg); -webkit-transform: rotate(11deg); transform: rotate(11deg); } .eye-rightright-eyelash5 { top: 1px; rightright: 8px; width: 2px; height: 6px; background-color: #000; -moz-transform: rotate(14deg); -ms-transform: rotate(14deg); -o-transform: rotate(14deg); -webkit-transform: rotate(14deg); transform: rotate(14deg); } .eye-left { top: 114px; left: 45px; z-index: 110; width: 19px; height: 63px; border: 1px solid #000; border-top-width: 2px; -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px; -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px; border-radius: 29px 28px 33px / 97px 111px 40px 90px; background-color: #F8FAF7; -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset; -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset; box-shadow: 0px 6px 0 0 #d5d9e2 inset; -moz-transform: rotate(-9deg); -ms-transform: rotate(-9deg); -o-transform: rotate(-9deg); -webkit-transform: rotate(-9deg); transform: rotate(-9deg); } .eye-left-inner { rightright: 0; bottombottom: 1px; z-index: 115; width: 15px; height: 46px; -moz-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px; -webkit-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px; border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px; background-color: #000; } .eye-left-light1 { top: 19px; rightright: 1px; z-index: 120; width: 7px; height: 18px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background-color: #FFF; -moz-animation: eye-flash 0.2s linear 0.1s infinite normal; -o-animation: eye-flash 0.2s linear 0.1s infinite normal; -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal; -moz-transform: rotate(-9deg); -ms-transform: rotate(-9deg); -o-transform: rotate(-9deg); -webkit-transform: rotate(-9deg); transform: rotate(-9deg); animation: eye-flash 0.2s linear 0.1s infinite normal; } .eye-left-light2 { bottombottom: 6px; left: 4px; z-index: 120; width: 11px; height: 4px; -webkit-border-bottom-rightright-radius: 100%; border-bottom-rightright-radius: 100%; background-color: #FFF; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .eye-left-eyelash1 { top: 7px; left: -1px; width: 2px; height: 4px; background-color: #000; -moz-transform: rotate(-49deg); -ms-transform: rotate(-49deg); -o-transform: rotate(-49deg); -webkit-transform: rotate(-49deg); transform: rotate(-49deg); } .eye-left-eyelash2 { top: -1px; left: 2px; width: 2px; height: 5px; background-color: #000; -moz-transform: rotate(-28deg); -ms-transform: rotate(-28deg); -o-transform: rotate(-28deg); -webkit-transform: rotate(-28deg); transform: rotate(-28deg); } .eye-left-eyelash3 { top: -6px; left: 7px; width: 2px; height: 5px; background-color: #000; -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } .eye-left-eyelash4 { top: -4px; left: 13px; width: 2px; height: 4px; background-color: #000; -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } .eye-left-eyelash5 { top: 3px; rightright: 0; width: 2px; height: 4px; background-color: #000; -moz-transform: rotate(41deg); -ms-transform: rotate(41deg); -o-transform: rotate(41deg); -webkit-transform: rotate(41deg); transform: rotate(41deg); } .rightright-eyebrow { top: 68px; left: 92px; z-index: 110; width: 66px; height: 36px; border: 2px solid #000; border-width: 2px 1px 0px 1px; -moz-border-radius: 45px 51px 0 0; -webkit-border-radius: 45px 51px 0 0; border-radius: 45px 51px 0 0; background-color: transparent; -moz-transform: skew(-6deg, 16deg); -ms-transform: skew(-6deg, 16deg); -o-transform: skew(-6deg, 16deg); -webkit-transform: skew(-6deg, 16deg); transform: skew(-6deg, 16deg); } .rightright-eyebrow-over { top: 21px; rightright: -5px; z-index: 115; width: 13px; height: 20px; background-color: #f6c6b0; } .left-eyebrow { top: 89px; left: 36px; z-index: 100; width: 30px; height: 68px; border: 2px solid #000; border-width: 2px 1px 0px 1px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background-color: transparent; -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } .left-eyebrow-over { top: 17px; rightright: -9px; z-index: 105; width: 39px; height: 55px; -moz-border-radius: 21px 12px 0 17px; -webkit-border-radius: 21px 12px 0 17px; border-radius: 21px 12px 0 17px; background-color: #f6c6b0; -moz-transform: rotate(-13deg); -ms-transform: rotate(-13deg); -o-transform: rotate(-13deg); -webkit-transform: rotate(-13deg); transform: rotate(-13deg); } .nose { top: 172px; left: 63px; z-index: 115; width: 21px; height: 16px; border: 2px solid #000; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 3px 1px 0 0 #fff inset; -webkit-box-shadow: 3px 1px 0 0 #fff inset; box-shadow: 3px 1px 0 0 #fff inset; } .nose-over { top: -1px; rightright: -11px; z-index: 115; width: 19px; height: 14px; background-color: #f6c6b0; -moz-transform: rotate(31deg); -ms-transform: rotate(31deg); -o-transform: rotate(31deg); -webkit-transform: rotate(31deg); transform: rotate(31deg); } .nose-tip { top: -7px; left: 13px; width: 2px; height: 6px; background-color: #000; -moz-transform: rotate(14deg); -ms-transform: rotate(14deg); -o-transform: rotate(14deg); -webkit-transform: rotate(14deg); transform: rotate(14deg); } .mouth { bottombottom: 61px; left: 72px; z-index: 110; width: 46px; height: 47px; border: 2px solid #000; border-width: 0 1px 2px 0; -moz-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px; -webkit-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px; border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px; background-color: #92222E; -moz-transform: rotate(1deg) skew(0deg, 39deg); -ms-transform: rotate(1deg) skew(0deg, 39deg); -o-transform: rotate(1deg) skew(0deg, 39deg); -webkit-transform: rotate(1deg) skew(0deg, 39deg); transform: rotate(1deg) skew(0deg, 39deg); } .mouth-over-1 { bottombottom: 0; left: -4px; z-index: 115; width: 37px; height: 58px; border-right: 1px solid #000; -moz-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px; -webkit-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px; border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px; background-color: #f6c6b0; -moz-transform: rotate(38deg) skew(0deg, 6deg); -ms-transform: rotate(38deg) skew(0deg, 6deg); -o-transform: rotate(38deg) skew(0deg, 6deg); -webkit-transform: rotate(38deg) skew(0deg, 6deg); transform: rotate(38deg) skew(0deg, 6deg); } .mouth-over-2 { bottombottom: 38px; left: 30px; z-index: 150; width: 7px; height: 19px; background-color: #f6c6b0; -moz-transform: rotate(-233deg); -ms-transform: rotate(-233deg); -o-transform: rotate(-233deg); -webkit-transform: rotate(-233deg); transform: rotate(-233deg); } .mouth-over-3 { bottombottom: -9px; left: 11px; z-index: 115; width: 27px; height: 9px; border-top: 2px solid #000; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background-color: #f6c6b0; -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } .mouth-over-4 { bottombottom: -6px; left: -1px; z-index: 150; width: 7px; height: 15px; background-color: #f6c6b0; -moz-transform: rotate(-226deg); -ms-transform: rotate(-226deg); -o-transform: rotate(-226deg); -webkit-transform: rotate(-226deg); transform: rotate(-226deg); } .mouth-tip { bottombottom: 39px; left: 41px; z-index: 120; width: 2px; height: 3px; background-color: #000; -moz-transform: rotate(-51deg); -ms-transform: rotate(-51deg); -o-transform: rotate(-51deg); -webkit-transform: rotate(-51deg); transform: rotate(-51deg); } .mouth-inner { bottombottom: 50px; left: 107px; z-index: 115; width: 10px; height: 18px; -moz-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px; -webkit-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px; border-radius: 10px 0 4px 6px / 8px 2px 8px 9px; background-color: #ed675c; -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); -webkit-transform: rotate(6deg); transform: rotate(6deg); } .name-lable { bottombottom: -9px; left: -8px; z-index: 150; width: 280px; color: #005aa9; text-align: center; font-weight: bold; font-style: italic; font-size: 50px; font-family: Times New Roman; } .name-lable-light { top: 30px; width: 100%; height: 0; -moz-box-shadow: 0 0 3px 3px #fff; -webkit-box-shadow: 0 0 3px 3px #fff; box-shadow: 0 0 3px 3px #fff; } @-webkit-keyframes input-flash { 0% { border-color: #ccc; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); } 100% { border-color: rgba(82,168,236,0.8); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); } } @-moz-keyframes input-flash { 0% { border-color: #ccc; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); } 100% { border-color: rgba(82,168,236,0.8); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); } } @-ms-keyframes input-flash { 0% { border-color: #ccc; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); } 100% { border-color: rgba(82,168,236,0.8); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); } } @keyframes input-flash { 0% { border-color: #ccc; -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); } 100% { border-color: rgba(82,168,236,0.8); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6); } }
ASTRO BOY
使用CSS3画出一个叮当猫
如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易 的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的 人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：
PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻了好多，哈哈！热烈的笑脸
立即学习“前端免费学习笔记（深入）”；
首先，先把HTML结构搭建好：
最好先把叮当猫的整体结构仔细研究一下，这对以后想要自己动手画别的人物形象很有帮助，思路会比较明朗。
接下来，我们按照头部，脖子，身体，脚部分别进行演示。首先将容器wrapper和叮当猫整体做一些基本的样式，叮当猫整体doraemon 设置position为relative，主要是为了便于 子元素/后代元素进行定位。
.wrapper{ margin: 50px 0 0 500px; } .doraemon{ position: relative; }
头部head的样式，因为叮当猫的头部不是正圆，所以宽高有一点偏差，然后使用border-radius将头部从矩形变成椭圆形，然后再使用径向渐变从右上角给背景来个放射性渐变，然后在加个阴影，使其更有立体感，background：#07bbee;是为了兼容低版本浏览器：
.doraemon .head { position:relative; width: 320px; height: 300px; border-radius: 150px; background: #07bbee; background: -webkit-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); background: -moz-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); background: -ms-radial-gradient(rightright top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); border:2px solid #555; box-shadow:-5px 10px 15px rgba(0,0,0,0.45); }
看看效果到底怎么样：
惊讶 shenmgui ,这么丑，别急，慢慢让它活过来：
/*脸部*/ .doraemon .face { position: relative; /*让所有脸部元素可自由定位*/ z-index: 2; /*脸在头部背景上面*/ } /*白色脸底*/ .doraemon .face .white { width: 265px; /*设置宽高*/ height: 195px; border-radius: 150px; position: absolute; /*进行绝对定位*/ top: 75px; left: 25px; background: #fff; /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/ background: -webkit-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444); background: -moz-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444); background: –ms-radial-gradient(rightright top,#fff 75%,#eee 80%,#999 90%,#444); } /*鼻子*/ .doraemon .face .nose{ width:30px; height:30px; border-radius:15px; background:#c93300; border:2px solid #000; position:absolute; top:110px; left:140px; z-index:3; /*鼻子在白色脸底下面*/ } /*鼻子上的高光*/ .doraemon .face .nose .light { width:10px; height:10px; border-radius: 5px; box-shadow: 19px 8px 5px #fff; /*通过阴影实现高光*/ } /*鼻子下的线*/ .doraemon .face .nose_line{ width:3px; height:100px; background:#333; position:absolute; top:143px; left:155px; z-index:3; } /*嘴巴*/ .doraemon .face .mouth{ width:220px; height:400px; /*通过底边框加上圆角模拟微笑嘴巴*/ border-bottom:3px solid #333; border-radius:120px; position:absolute; top:-160px; left:45px; } /*眼睛*/ .doraemon .eyes { position: relative; z-index: 3; /*眼睛在白色脸底下面*/ } /*眼睛共同的样式*/ .doraemon .eyes .eye{ width:72px; height:82px; background:#fff; border:2px solid #000; border-radius:35px 35px; position:absolute; top:40px; } /*眼珠*/ .doraemon .eyes .eye .black{ width:14px; height:14px; background:#000; border-radius:7px; position:absolute; top:40px; } .doraemon .eyes .left{ left:82px; } .doraemon .eyes .rightright { left: 156px; } .doraemon .eyes .eye .bleft { left: 50px; } .doraemon .eyes .eye .bright { left: 7px; }
写了这么多样式，结果是怎么样的呢：
生病 怎么看都觉得别扭，哦！还差胡须须和白色脸底的边框呢，咱给补上：
/*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/ .doraemon .whiskers{ width:220px; height:80px; background:#fff; border-radius:15px; position:absolute; top:120px; left:45px; z-index:2; /*在鼻子和眼睛下面*/ } /*所有胡子的公用样式*/ .doraemon .whiskers .whisker { width: 60px; height: 2px; background: #333; position: absolute; z-index: 2; } /*右上胡子*/ .doraemon .whiskers .rTop { left: 165px; top: 25px; } /*右中胡子*/ .doraemon .whiskers .rMiddle { left: 167px; top: 45px; } /*右下胡子*/ .doraemon .whiskers .rBottom { left: 165px; top: 65px; } /*左上胡子*/ .doraemon .whiskers .lTop { left: 0; top: 25px; } /*左中胡子*/ .doraemon .whiskers .lMiddle { left: -2px; top: 45px; } /*左下胡子*/ .doraemon .whiskers .lBottom { left: 0; top: 65px; } /*胡子旋转角度*/ .doraemon .whiskers .r160 { -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); } .doraemon .whiskers .r20 { -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); }
微笑 这样就对了，看着多舒服啊！趁热打铁，做脖子和身体：
/*围脖*/ .doraemon .choker { width: 230px; height: 20px; background: #c40; /*线性渐变 让围巾看上去更自然*/ background: -webkit-gradient(linear,left top,left bottombottom,from(#c40),to(#800400)); background: -moz-linear-gradient(center top,#c40,#800400); background: -ms-linear-gradient(center top,#c40,#800400); border: 2px solid #000; border-radius: 10px; position: relative; top: -40px; left: 45px; z-index: 4; } /*铃铛*/ .doraemon .choker .bell { width: 40px; height: 40px; _overflow: hidden; /*IE6 hack*/ border: 2px solid #000; border-radius: 50px; background: #f9f12a; background: -webkit-gradient(linear, left top, left bottombottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); box-shadow: -5px 5px 10px rgba(0,0,0,0.25); position: absolute; top: 5px; left: 90px; } /*双横线*/ .doraemon .choker .bell_line { width: 36px; height: 2px; background: #f9f12a; border: 2px solid #333; border-radius: 3px 3px 0 0; position: absolute; top: 10px; } /*黑点*/ .doraemon .choker .bell_circle{ width:12px; height:10px; background:#000; border-radius:5px; position:absolute; top:20px; left:14px; } /*黑点下的线*/ .doraemon .choker .bell_under{ width: 3px; height:15px; background:#000; position:absolute; left: 18px; top:27px; } /*铃铛高光*/ .doraemon .choker .bell_light{ width:12px; height:12px; border-radius:10px; box-shadow:19px 8px 5px #fff; position:absolute; top:-5px; left:5px; opacity:0.7; } /*身子*/ .doraemon .bodys { position: relative; top: -310px; } /*肚子*/ .doraemon .bodys .body { width: 220px; height: 165px; background: #07beea; background: -webkit-gradient(linear,rightright top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be)); background: -moz-linear-gradient(rightright center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); background: -ms-linear-gradient(rightright center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); border:2px solid #333; position:absolute; top:265px; left:50px; } /*白色肚兜*/ .doraemon .bodys .wraps { width: 170px; height: 170px; background: #fff; background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); background: -moz-linear-gradient(rightright top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); background: -ms-linear-gradient(rightright top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); border: 2px solid #000; border-radius: 85px; position: absolute; left: 72px; top: 230px; } /*口袋*/ .doraemon .bodys .pocket { width: 130px; height: 130px; border-radius: 65px; background: #fff; background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff)); background: -moz-linear-gradient(rightright top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); background: -ms-linear-gradient(rightright top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); border: 2px solid #000; position:absolute; top: 250px; left: 92px; } /*挡住口袋一半*/ .doraemon .bodys .pocket_mask { width: 134px; height: 60px; background:#fff; border-bottom: 2px solid #000; position:absolute; top: 259px; left: 92px; }
好吧，脖子和身子都有啦！上图：
现在看起来有点像摆设品，不过笑容还是那么单纯，好了，赶紧把手脚做出来：
/*左右手*/ .doraemon .hand_right, .doraemon .hand_left { height: 100px; width: 100px; position: absolute; top: 272px; left: 248px; } /*左手*/ .doraemon .hand_left { left: -10px; } /*手臂公共部分*/ .doraemon .arm { width:80px; height:50px; background: #07beea; background: -webkit-gradient(linear, left top, left bottombottom, from(#07beea),color-stop(0.85,#07beea), to(#555)); background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555); background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555); border: 1px solid #000000; box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35); z-index: -1; position: relative; } /*右手手臂*/ .doraemon .hand_right .arm { top: 17px; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } /*左手手臂*/ .doraemon .hand_left .arm { top: 17px; background: #0096be; /*背光一面使用纯色，使其有立体感*/ box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25); -webkit-transform: rotate(145deg); -moz-transform: rotate(145deg); -ms-transform: rotate(145deg); -o-transform: rotate(145deg); transform: rotate(145deg); } /*圆形手掌公共部分*/ .doraemon .circle { width: 60px; height: 60px; border-radius: 30px; border: 2px solid #000; background: #fff; background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999)); background: -moz-linear-gradient(rightright top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); background: -ms-linear-gradient(rightright top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); position: absolute; } /*右手手掌*/ .doraemon .hand_right .circle { left: 40px; top: 32px; } /*左手手掌*/ .doraemon .hand_left .circle { left: -20px; top: 32px; } /*手臂和身体结合处，使用背景遮住边框*/ .doraemon .arm_rewrite { height: 45px; width: 5px; background: #07beea; position: relative; } /*右手结合处*/ .doraemon .hand_right .arm_rewrite { top: -45px; left: 22px; } /*左手结合处*/ .doraemon .hand_left .arm_rewrite { top: -45px; left: 60px; background: #0096be; /*同理，背光一面使用纯色，使其有立体感*/ } /*脚部*/ .doraemon .foot { width: 280px; height: 40px; position: relative; top: 55px; left: 20px; } /*左右脚共同样式*/ .doraemon .foot .left, .doraemon .foot .rightright { width: 125px; height: 30px; background: #fff; background: -webkit-gradient(linear, rightright top, left bottombottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999)); background: -moz-linear-gradient(rightright top, #fff, #fff 75%, #eee 85%, #999); background: -ms-linear-gradient(rightright top, #fff, #fff 75%, #eee 85%, #999); border: 2px solid #333; border-radius: 80px 60px 60px 40px; box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35); position: relative; } .doraemon .foot .left { left: 8px; top: 65px; } .doraemon .foot .rightright { top: 31px; left: 141px; } /*双脚之间的缝隙，加阴影使用立体感*/ .doraemon .foot .foot_rewrite { width: 20px; height: 10px; background: #fff; background: -webkit-gradient(linear, rightright top, left bottombottom, from(#666),color-stop(0.83,#fff), to(#fff)); background: -moz-linear-gradient(rightright top, #666, #fff 83%, #fff); background: -ms-linear-gradient(rightright top, #666, #fff 83%, #fff); /*制作半圆效果*/ border: 2px solid #000; border-bottom: none; border-radius: 40px 40px 0 0; position: relative; top: -11px; left: 130px; _left: 127px; }
好了，最后完整结果：
看一下，效果是不是和一开始的一样呢 大笑 ，虽然做好了，但是还是可以让它动起来的，比如眼睛，我们可以给它加个动画效果，让眼睛转动起来：
/*眼珠*/ .doraemon .eyes .eye .black { width: 14px; height: 14px; background: #000; border-radius: 7px; position: absolute; top: 40px; -webkit-animation: eyemove 3s linear infinite; -moz-animation: eyemove 3s linear infinite; -ms-animation: eyemove 3s linear infinite; -o-animation: eyemove 3s linear infinite; animation: eyemove 3s linear infinite; } /*让眼睛动起来*/ @-webkit-keyframes eyemove { 70%{ margin:0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @-moz-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @-o-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } }
OK，这样，眼睛就会动了，有兴趣的可以试一下，这里就无法展示了。但是如果你有什么更好的动画效果也可以尝试，那么这个案例就结束了。
PS：虽然这只是一个案例，不过确实帮助我开阔思维，而且其实做一个这样的效果，可能会花费很多时间，至少对我来说目前确实是这样子，主要难点还是布局定位和颜色的合理搭配，才能使形象更加逼真生动！
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何使用CSS3中的calc()属性来表达尺寸
如何利用CSS3制作简单的3d半透明立方体图片
以上就是如何使用HTML和CSS3绘制基本卡通图案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610410.html
微信扫一扫 
支付宝扫一扫 
