Html
    Css
    Js

    
                        
 @keyframes mover {
	40% {
	opacity:1;
	color:#ff0097
}
60% {
	color:#00fd8a
}
}@-moz-keyframes mover {
	40% {
	opacity:1;
	color:#ff0097
}
60% {
	color:#00fd8a
}
80% {
	opacity:.8
}
100% {
	opacity:1
}
}@-webkit-keyframes mover {
	40% {
	opacity:1;
	color:#ff0097
}
60% {
	color:#00fd8a
}
80% {
	opacity:.8
}
100% {
	opacity:1
}
}@-o-keyframes mover {
	40% {
	opacity:1;
	color:#ff0097
}
60% {
	color:#00fd8a
}
80% {
	opacity:.8
}
100% {
	opacity:1
}
}@keyframes mover2 {
	40% {
	opacity:1;
	color:#ff0016
}
60% {
	color:#0034fd
}
}@-moz-keyframes mover2 {
	40% {
	opacity:1;
	color:#ff0016
}
60% {
	color:#0034fd
}
80% {
	opacity:.8
}
100% {
	opacity:1
}
}@-webkit-keyframes mover2 {
	40% {
	opacity:1;
	color:#ff0016
}
60% {
	color:#0034fd
}
80% {
	opacity:.8
}
100% {
	opacity:1
}
}@-o-keyframes mover2 {
	40% {
	opacity:1;
	color:#ff0016
}
60% {
	color:#0034fd
}
80% {
	opacity:.8
}
100% {
	opacity:1
}
}.box,.box2 {
	margin:50px auto;
	width:80%;
	border-radius:8px;
	line-height:180px;
	border:1px solid #dedede;
	letter-spacing:2px;
	font-size:48px;
	text-align:center;
	color:#333;
	text-transform:uppercase;
}
.box,.box2 i:nth-of-type(2) {
	animation-delay:.05s
}
.box,.box2 i:nth-of-type(3) {
	animation-delay:.1s
}
.box,.box2 i:nth-of-type(4) {
	animation-delay:.15s
}
.box,.box2 i:nth-of-type(5) {
	animation-delay:.2s
}
.box,.box2 i:nth-of-type(6) {
	animation-delay:.25s
}
.box,.box2 i:nth-of-type(7) {
	animation-delay:.3s
}
.box,.box2 i:nth-of-type(8) {
	animation-delay:.35s
}
.box,.box2 i:nth-of-type(9) {
	animation-delay:.4s
}
.box,.box2 i:nth-of-type(10) {
	animation-delay:.45s
}
.box,.box2 i:nth-of-type(11) {
	animation-delay:.5s
}
.box,.box2 i:nth-of-type(12) {
	animation-delay:.55s
}
.box i,.box2 i {
	text-shadow:0 0 8px gray;
	font-weight:bold;
	font-style:normal;
	animation:mover 4s ease-in-out infinite;
	-moz-animation:mover 4s forwards;
	animation:mover 4s ease-in-out infinite;
	-webkit-animation:mover 4s ease-in-out infinite;
	-o-animation:mover 4s ease-in-out infinite
}
.box,.box2 i {
	animation:mover2 .8s ease-in-out infinite;
	-moz-animation:mover2 .8s forwards;
	animation:mover2 .8s ease-in-out infinite;
	-webkit-animation:mover2 .8s ease-in-out infinite;
	-o-animation:mover2 .8s ease-in-out infinite
}

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

纯CSS文字动画

纯css文字渐变动画效果:
css3,文字渐变,css动画效果。
没有javascriptt代码。
实现原理:
    将文字拆分开,每个字单独的用一个元素包起来,根据顺序设置对应的css animation-delay: 延迟执行时间, 延迟执行animation动画。
经测试性能效好,比用js来实现要简单很多,而且方便快捷。

0