如何制作带动效的跑马灯文字

跑马灯文字是一种特殊的排版方式，用于展示滚动的信息。如果加入动效，可以更加吸引人的眼球，常见于网站首页或广告展示等场景。本文将从以下几个方面详细介绍如何制作带动效的跑马灯文字。

一、使用CSS3动画制作跑马灯效果

利用CSS3的 animation 属性可以很方便的实现动画效果，结合使用 JavaScript 就可以做到跑马灯的效果。下面是一个示例：

  

    
   
跑马灯文字1
   
    
   
跑马灯文字2
   

  

在上面的代码中，通过设置 marquee-ct 元素的宽度和高度，并将其 overflow 属性设置为 hidden，将 marquee-item 元素绝对定位在其中，并使用 animation 属性和 keyframes 定义动画效果。

二、使用jQuery插件制作跑马灯效果

jQuery 是一个非常实用的 JavaScript 库，可以很方便的优化网页制作效果。利用 jQuery 的 marquee 插件就可以实现轻松的跑马灯效果。下面是一个示例：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.marquee.min.js"></script>


  

    
   
跑马灯文字1
   
    
   
跑马灯文字2
   

  

<script>
    $('.marquee-ct').marquee({
        duration: 12000,
        gap: 50,
        delayBeforeStart: 0,
        direction: 'left',
        duplicated: true
    });
</script>

在上面的代码中，利用 jQuery 引入 marquee 插件，并在调用时设置了一些参数，包括动画的间隔时间、滚动间隔时间、滚动方向、是否允许复制等。

三、结合CSS3、jQuery和HTML5 Canvas制作跑马灯效果

使用 HTML5 的 canvas 标签，在跑马灯的基础上添加动态图形效果。下面是一个示例：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.marquee.min.js"></script>


  

  

    
   
跑马灯文字1
   
    
   
跑马灯文字2
   

  

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var w = canvas.width = window.innerWidth;
    var h = canvas.height = window.innerHeight;

    var hue = 217;
    var stars = [];
    var count = 0;
    var maxStars = 1300; // 星星数量

    var canvas2 = document.createElement('canvas');
    canvas2.width = 100;
    canvas2.height = 100;
    var ctx2 = canvas2.getContext('2d');
    var half = canvas2.width / 2;
    var gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#CCC');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    function random(min, max) {
        if (arguments.length < 2) {
            max = min;
            min = 0;
        }

        if (min > max) {
            var hold = max;
            max = min;
            min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
        var max = Math.max(x, y);
        var diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
    }

    var Star = function() {
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 12;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, 25);
        this.speed = random(this.orbitRadius) / 2000000; // 星星飞行速度
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
    };

    Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX;
        var y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY;
        var twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    };

    for (var i = 0; i < maxStars; i++) {
        new Star();
    }

    function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5; // 尾巴
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillRect(0, 0, w, h);

        ctx.globalCompositeOperation = 'lighter'; // 星星
        for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
        }

        window.requestAnimationFrame(animation);
    }

    animation();

    $('.marquee-ct').marquee({
        duration: 12000,
        gap: 50,
        delayBeforeStart: 0,
        direction: 'left',
        duplicated: true
    });
</script>

在上面的代码中，通过添加 canvas 标签，利用 JavaScript 生成了闪烁的星星效果。