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