CSS画出一个可爱神奇的多啦A梦

border-radius：转换为圆角；   
 
z-index：指定该元素的层叠顺序，比如说图片，若z-index为-1，覆盖在图片上面的字就会显示出来。
 
rgba(0,0,0,0.45)：表示透明度的；
 
—overflow:设置当元素的内容溢出其区域时发生的事情,hidden,隐藏。
 
transform:转换和旋转；
 
这里还有一个动画效果，目的是让小叮当的眼睛动起来~ 

CSS Code复制内容到剪贴板

<style type="text/css">   

    @-webkit-keyframes eyemove{   

        80%{margin:0; }   

        85%{margin:-20px 0 0 0;}   

        90%{margin:0 0 0 0;}   

        93%{margin:0 0 0 7px;}   

        96%{margin:0 0 0 0;}   

    }   

    @-webkit-keyframes eyemove{   

        80%{margin:0; }   

        85%{margin:-20px 0 0 0;}   

        90%{margin:0 0 0 0;}   

        93%{margin:0 0 0 7px;}   

        96%{margin:0 0 0 0;}   

    }   

    @-webkit-keyframes eyemove{   

        80%{margin:0; }   

        85%{margin:-20px 0 0 0;}   

        90%{margin:0 0 0 0;}   

        93%{margin:0 0 0 7px;}   

        96%{margin:0 0 0 0;}   

    }   

    .doraemon .eyes .eye .black{   

        -webkit-animation-name:eyemove;   

        -webkit-animation-duration: 5s;   

        -webkit-animation-timing-function:linear;   

        -webkit-animation-iteration-count: 20000;   

        -webkit-animation-name:eyemove;   

        -webkit-animation-duration: 5s;   

        -webkit-animation-timing-function:linear;   

        -webkit-animation-iteration-count: 20000;   

        -webkit-animation-name:eyemove;   

        -webkit-animation-duration: 5s;   

        -webkit-animation-timing-function:linear;   

        -webkit-animation-iteration-count: 20000;   

    }   

    </style>    

最后再来看一看哆啦A梦的最终效果图。

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!