在本系列的第二个教程中，您学习了如何使用KUTE.js为网页上元素的不同CSS属性设置动画。您学习了如何为所有变换属性以及border-radius和border-color等属性设置动画。您还可以使用CSS插件对CSS属性进行动画处理，例如font-size、line-height、letter-spacing和字间距。
KUTE.js还有一个文本插件，允许您通过增加或减少倒计时等数字或逐字符写入字符串来为不同元素内的文本设置动画。
在本教程中，您将学习如何使用KUTE.js中的CSS和文本插件为网页上不同元素内的文本设置动画。
动画CSS文本属性
正如我之前提到的，您可以使用KUTE.jsCSS插件为四个不同的与文本相关的CSS属性设置动画。这些属性是font-size、line-height、letter-spacing和word-spacing。我们还将使用第一个教程中讨论的核心引擎的一些属性来为单个字母设置动画。让我们看看如何在下面的演示中结合使用所有这些概念来创建振动HELLO文本。
以下是用于创建上述动画的代码：
cript;toolbal:false;">vartheLetters=document.querySelectorAll("span");varh=document.querySelector(".h");vare=document.querySelector(".e");varla=document.querySelector(".la");varlb=document.querySelector(".lb");varo=document.querySelector(".o");varstartButton=document.querySelector(".start");varanimateColor=KUTE.allFromTo(theLetters,{color:'white'},{color:'red'},{offset:200,duration:50});varanimateFontSize=KUTE.allFromTo(theLetters,{fontSize:'2em'},{fontSize:'4em'},{offset:100,duration:200,repeat:10,yoyo:true});varanimateSkewing=KUTE.allTo(theLetters,{skewX:-15},{offset:200,duration:200});varanimateH=KUTE.to(h,{color:'#009688'});varanimateE=KUTE.to(e,{translateY:-40,color:'#E91E63'});varanimateLA=KUTE.to(la,{color:'#8BC34A'});varanimateLB=KUTE.to(lb,{translateY:20,color:'#FFC107'});varanimateO=KUTE.to(o,{color:'#FF5722'});varlettersSqueezed=KUTE.allTo(theLetters,{letterSpacing:'-15px'},{offset:0,duration:200});animateColor.chain(animateFontSize);animateFontSize.chain(animateSkewing);animateSkewing.chain(animateH,animateE,animateLA,animateLB,animateO);animateE.chain(lettersSqueezed);startButton.addEventListener("click",function(){animateColor.start();},false);
