如何使用HTML和CSS3绘制基本卡通图案

这篇文章主要介绍了使用css3绘制基本卡通图案的示例分享,不过必须承认,这样做的代码量并不是很少…well,需要的朋友可以参考下

纯HTML+CSS实现阿童木头像
先上最终效果图：

在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴 影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。

nbsp;html>                                            * {                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绘制基本卡通图案的详细内容，更多请关注【创想鸟】其它相关文章！