html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果

如上图，这种效果看着是不是挺“柔”的

附代码

文字一次渐变出现

body{

background-color: #333333;

padding: 20px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

div,span{

color: #ffffff;

font-size: 30px;

}

.hidden{

display: none;

animation: all 1s 1;

}

.display{

display: inline-block;

animation: text 3s 1;

}

@keyframes text {

0%{

color: transparent;

}

100%{

color: #fff;

}

}

var str='我们这一路被带去；抑或为了生？抑或为了死？不，没有死，只有生;我见过生与死：我们无须怀疑，我们有充分的证据；它们迥然不同，令人恐惧;如同死亡，新的诞生也带给我们痛苦;我们回到自己的地方，回到灵魂的国土；遵循过去的天道，让我们不再安逸和幸福;外邦人紧握他们的神，祈求永生；而我乐于再死一次———义无反顾'

//分割为数组

var arr=str.split('')

$.each(arr,function (index,el) {

//依次将每个字放到div里

$('div').append(''+el+'')

//给每个字添加样式，时机为 index*150 ms

setTimeout(function () {

$('#text'+index).addClass('display')

},index*150)

})

这里主要分两步

第一步

利用setTimeout的延时效果依次将文字显示出来，每个文字显示的时机都是 index*150 ms，其实这时主要效果已经出来了，类似那种打字的效果

第二步

利用animation与keyframe实现每个字的渐变效果，颜色从透明过渡到#fff，这样每个字连起来，就实现了如上图的效果

demo体验地址