Html
    Css
    Js

    
                        
* {
	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;
}
}*/

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS3字体动画效果

这个是简单的一个css3的效果,主要的代码就是transform:translate

0