<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
吃豆人动画演示
.box{ width:200px; height:200px; margin-top:200px; margin-left:200px; border-radius:50%; position:absolute; box-shadow:150px 0px 0px -80px red,300px 0px 0px -80px red,450px 0px 0px -80px red,600px 0px 0px -80px red, 750px 0px 0px -80px red,900px 0px 0px -80px red; animation:go3 1s infinite linear; } @keyframes go3{ 100%{ box-shadow: 50px 0px 0px -80px red, 200px 0px 0px -80px red, 350px 0px 0px -80px red, 500px 0px 0px -80px red, 650px 0px 0px -80px red, 800px 0px 0px -80px red; } } .box-top{ width:200px; height:100px; background-color:#FFFF00; border-radius:100px 100px 0px 0px; margin:0px; animation:go1 1s infinite; } @keyframes go1{ 0%{ transform:rotate(0); } 50%{ transform:rotate(-30deg); } 100%{ transform:rotate(0); } } .box-bottom{ width:200px; height:0px; background-color:#FFFF00; border-radius:0px 0px 100px 100px; padding-top:100px; animation:go2 1s infinite; } @keyframes go2{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(30deg); } 100%{ transform:rotate(0deg); } } .box-eye{ width:30px; height:30px; background-color:#FF0000; border-radius:50%; position:absolute; left:80px; top:30px; }
