使用HTML和CSS3绘制基本卡通图案的示例分享

好了，最后完整结果：

看一下，效果是不是和一开始的一样呢 大笑 ，虽然做好了，但是还是可以让它动起来的，比如眼睛，我们可以给它加个动画效果，让眼睛转动起来：

CSS Code复制内容到剪贴板

/*眼珠*/    
        .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;    
            }