如上图,这种效果看着是不是挺“柔”的
附代码
文字一次渐变出现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体验地址