如上圖，這種效果看著是不是挺“柔”的

附代碼

文字一次漸變出現

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體驗地址

總結

以上是生活随笔為你收集整理的html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。