Javascript网页抖动特效代码

2024-12-16 14:42:31 JS 1233

实现网页抖动特效可以通过使用CSS和JavaScript结合实现。这里我将为你提供一个简单的实现：

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>
    <h1>抖动特效示例</h1>
    <button id="shakeButton">触发抖动</button>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）：

css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    font-size: 2em;
}

.shake {
    animation: shake 0.5s;
    animation-iteration-count: 1;
}

@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); }
}

JavaScript部分（script.js）：

javascript
document.getElementById('shakeButton').addEventListener('click', function() {
    const body = document.body;
    body.classList.add('shake');
    
    // 移除 shake 类以便于可以再次触发抖动效果
    setTimeout(() => {
        body.classList.remove('shake');
    }, 500); // 0.5s 后移除 class，对应动画时间
});

解释：

HTML：
- 一个简单的结构，包括一个按钮，用于触发抖动效果。
CSS：
- 使用 @keyframes 定义抖动动画，每隔10%的时间进行一次抖动。
- shake 类应用了这个抖动动画。
- body 中心对齐，设置了一些基本样式。
JavaScript：
- 当按钮被点击时，向 body 元素添加 shake 类，触发抖动效果。
- 使用 setTimeout 在动画结束后移除 shake 类，这样可以再次点击按钮触发抖动。

你可以根据需要调整抖动动画的细节，例如持续时间、抖动幅度等。这个示例提供了一个基本的实现，希望能帮助你创建想要的效果。