js怎么制作抖动文字

制作抖动文字的核心在于：使用JavaScript动态改变文字的位置、使用CSS动画、结合事件监听。这些技术能够让文字在页面上产生抖动效果。 下面将详细介绍如何使用JavaScript和CSS来制作抖动文字的效果。

一、使用CSS和JavaScript实现抖动效果

使用CSS和JavaScript结合，可以更灵活地控制抖动效果。CSS用于定义基本的动画效果，而JavaScript用于动态控制动画的触发和参数。

1、准备HTML结构

首先，需要一个简单的HTML结构，用于展示抖动文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖动文字效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="shaking-text">抖动文字效果</div>
    <script src="script.js"></script>
</body>
</html>

2、定义CSS动画

CSS动画用于定义抖动的关键帧。可以使用@keyframes来定义抖动效果。

/* styles.css */
.shaking-text {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.1s ease-in-out;
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

3、使用JavaScript控制动画

JavaScript用于动态添加和移除CSS类，从而控制抖动效果的触发。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const textElement = document.querySelector('.shaking-text');
    textElement.addEventListener('mouseover', function() {
        textElement.classList.add('shake-animation');
    });
    textElement.addEventListener('mouseout', function() {
        textElement.classList.remove('shake-animation');
    });
});
// 追加CSS类 shake-animation
.shake-animation {
    animation: shake 0.5s; /* 动画持续时间 */
    animation-iteration-count: infinite; /* 无限循环 */
}

二、使用纯JavaScript实现更复杂的抖动效果

对于一些复杂的抖动效果，可能需要直接使用JavaScript来控制每一帧的动画。这种方法需要更多的计算，但可以实现更为精细的效果。

1、定义HTML结构

HTML结构可以保持简单，只需要一个包含文字的<div>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖动文字效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="shaking-text">抖动文字效果</div>
    <script src="script.js"></script>
</body>
</html>

2、使用JavaScript实现抖动效果

使用JavaScript的setInterval或requestAnimationFrame来控制抖动的频率和幅度。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const textElement = document.getElementById('shaking-text');
    let interval;
    function startShaking() {
        interval = setInterval(shake, 100);
    }
    function stopShaking() {
        clearInterval(interval);
        textElement.style.transform = 'translate(0, 0)';
    }
    function shake() {
        const randomX = Math.random() * 10 - 5; // -5 到 5 之间的随机数
        const randomY = Math.random() * 10 - 5; // -5 到 5 之间的随机数
        textElement.style.transform = `translate(${randomX}px, ${randomY}px)`;
    }
    textElement.addEventListener('mouseover', startShaking);
    textElement.addEventListener('mouseout', stopShaking);
});

3、CSS样式

为文字添加一些基本的样式。

/* styles.css */
#shaking-text {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.1s ease-in-out;
}

三、结合多种动画效果

可以结合多种动画效果，使抖动文字更加丰富。例如，可以在抖动的同时改变文字的颜色或大小。

1、HTML结构

HTML结构保持不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖动文字效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="shaking-text">抖动文字效果</div>
    <script src="script.js"></script>
</body>
</html>

2、CSS样式

在原有的基础上，添加颜色变化和大小变化的动画。

/* styles.css */
#shaking-text {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.1s ease-in-out, color 0.1s ease-in-out, font-size 0.1s ease-in-out;
}
@keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@keyframes size-change {
    0% { font-size: 24px; }
    50% { font-size: 28px; }
    100% { font-size: 24px; }
}
.shake-animation {
    animation: shake 0.5s infinite, color-change 1s infinite, size-change 0.5s infinite;
}

3、JavaScript控制

保持JavaScript代码不变，仍然使用mouseover和mouseout事件来触发动画。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const textElement = document.getElementById('shaking-text');
    let interval;
    function startShaking() {
        interval = setInterval(shake, 100);
    }
    function stopShaking() {
        clearInterval(interval);
        textElement.style.transform = 'translate(0, 0)';
    }
    function shake() {
        const randomX = Math.random() * 10 - 5;
        const randomY = Math.random() * 10 - 5;
        textElement.style.transform = `translate(${randomX}px, ${randomY}px)`;
    }
    textElement.addEventListener('mouseover', startShaking);
    textElement.addEventListener('mouseout', stopShaking);
});

通过以上方法，可以实现文字在页面上的抖动效果，并且可以根据需要添加更多的动画效果，使文字展示更加丰富多彩。