利用定时器和css3动画制作文字依次渐变显示的效果
2018-01-27 本文已影响50人
李佳明先生
如上图，这种效果看着是不是挺“柔”的
附代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字一次渐变出现</title>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<style>
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;
}
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var str='我们这一路被带去；抑或为了生？抑或为了死？不，没有死，只有生;我见过生与死：我们无须怀疑，我们有充分的证据；它们迥然不同，令人恐惧;如同死亡，新的诞生也带给我们痛苦;我们回到自己的地方，回到灵魂的国土；遵循过去的天道，让我们不再安逸和幸福;外邦人紧握他们的神，祈求永生；而我乐于再死一次———义无反顾'
//分割为数组
var arr=str.split('')
$.each(arr,function (index,el) {
//依次将每个字放到div里
$('div').append('<span id="text'+index+'" class="hidden">'+el+'</span>')
//给每个字添加样式，时机为 index*150 ms
setTimeout(function () {
$('#text'+index).addClass('display')
},index*150)
})
</script>
</html>
这里主要分两步
第一步
利用setTimeout的延时效果依次将文字显示出来，每个文字显示的时机都是 index*150 ms，其实这时主要效果已经出来了，类似那种打字的效果
第二步
利用animation与keyframe实现每个字的渐变效果，颜色从透明过渡到#fff，这样每个字连起来，就实现了如上图的效果
demo体验地址
