看一下，结果是不是和一开始的一样呢 大笑 ，固然做好了，可是照旧可以让它动起来的，好比眼睛，我们可以给它加个动画结果，让眼睛动弹起来：
/*眼珠*/ .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：固然这只是一个案例，不外确实辅佐我开阔思维，并且其实做一个这样的结果，大概会耗费许多时间，至少对我来说今朝确实是这样子，主要难点照旧机关定位和颜色的公道搭配，才气使形象越发传神活跃！大概也有人对PS可能Flash等图形处理惩罚软件不是很熟，对用CSS3画出一些人物可能其他结果较量没有头绪，那么就可以去一些网站参考设计师们的设计构图，图形解析等相关设计常识，辅佐我们更好地领略。