* { margin:0; padding:0; } @font-face { font-family:testfont; src:url("新唐人简篆体.ttf"); } .christmas { width:540px; height:960px; background:url("http://www.jq22.com/img/cs/540x300-1.jpg"); } #test-animation { width:150px; height:150px; background:rgba(255,162,0,1); color:#fff; font-size:48px; font-family:testfont; line-height:150px; text-align:center; -webkit-animation:myAnimation 10s; -webkit-animation-fill-mode:forwards; } @-webkit-keyframes myAnimation { 0% { border-radius:100%; -webkit-transform:translate(30px,270px) rotate(0deg); background:rgba(255,162,0,1); color:#fff; font-size:48px; } 25% { border-radius:100%; -webkit-transform:translate(355px,270px) rotate(0deg); background:rgba(255,162,0,1); color:#fff; font-size:48px; } 50% { border-radius:100%; -webkit-transform:translate(30px,500px) rotate(360deg); background:rgba(255,162,0,1); color:#fff; font-size:48px; } 75% { border-radius:100%; -webkit-transform:translate(355px,500px) rotate(360deg); background:rgba(255,162,0,0); color:purple; font-size:48px; } 100% { from { opacity:1; } to { opacity:0; } border-radius:100%; -webkit-transform:translate(355px,500px) rotate(360deg); background:rgba(255,162,0,0); color:purple; font-size:48px;}}/*@-webkit-keyframes myAnimation { from { opacity:1; } to { opacity:0; } }*/
这个是简单的一个css3的效果,主要的代码就是transform:translate