js/jquery打字机效果/文字渐变效果（文字逐个出现）

效果展示

jquery打字机效果（文字逐个出现），css文字渐变

效果图

1.HTML代码块

<div class="typewriter">
	<img src="img/bg003.jpg" class="bg01"/>
	<img src="img/bg001.png" class="bg02"/>
	<img src="img/bg001.png" class="bg03"/>
	<p class="text01"></p>
	<p class="text02"></p>
</div>

2.css样式

/* 打字机 */
.typewriter{width:1000px;margin: auto;background-color: #EEEEEE;box-sizing: border-box;padding: 100px 80px;height: 100%;position: relative;overflow: hidden;}
.typewriter p{font-size: 20px;background-image: linear-gradient(to bottom, #ec428c, #32d1d3);color: #ffffff;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;position: relative;z-index: 3;line-height: 32px;font-weight: bold;margin-bottom: 10px;}
.typewriter .bg01{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-size: cover;object-fit:cover;opacity: 0.5;}
.typewriter .bg03{position: absolute;right: 0;z-index: 1;top: 0;opacity: 0.5;}
.typewriter .bg02{position: absolute;left: 0;z-index: 1;bottom: -5%;width: 40%;transform: rotateY(180deg);mix-blend-mode: lighten;}

3.JavaScript

<script src="js/jquery.js"></script>
		<script src="js/l-byl.js"></script>
		<script>
			jQuery(document).ready(function($){
				let a = $(".text01").text();
				let b = $(".text02").text();
				$(".text01").lbyl({
					content: '满怀希望就会所向披靡。',
					speed: 100,
					type: 'show',
					finished: function(){ 
						$('.text02').lbyl({
							content:'人就是这样，想来想去，犹豫来犹豫去觉得自己没有准备好，勇气没攒够，其实只要迈出去了那一步了，就会发现其实所有的一切早就准备好了。我就觉得吧，没什么可想的，就是往前过呗，一直往前，一直往前，有些事儿没法提前预设方案，就不管了，总会有路的。',
							speed: 80,
							type: 'fade',
							fadeSpeed: 500
						})
					} // Finished Callback
				});
			
			});
		</script>

4.l-byl.js插件

(function ( $ ) {
 
    $.fn.lbyl = function( options ) {
 
        var s = $.extend({
            content: '',
            speed: 10,
            type: 'fade',
            fadeSpeed: 500,
            finished: function(){}
        }, options );

        var elem = $(this),
            letterArray = [],
            lbylContent = s.content,
            count = $(this).length;
        
        elem.empty();
        elem.attr('data-time', lbylContent.length * s.speed)
                                
        for (var i = 0; i < lbylContent.length; i++) {
            letterArray.push(lbylContent[i]);
        }
            
        $.each(letterArray, function(index, value) {
        elem.append('<span style="display: none;">' + value + '</span>');

            setTimeout(function(){
                if (s.type == 'show') {
                    elem.find('span:eq(' + index + ')').show();
                } else if (s.type == 'fade') {
                   elem.find('span:eq(' + index + ')').fadeIn(s.fadeSpeed); 
                }
            }, index * s.speed);

        });

        setTimeout(function(){
            s.finished();
        }, lbylContent.length * s.speed);
        
    };
 
}( jQuery ));