* {
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