热搜词
以下是一个简单的JavaScript代码示例，用于在用户在网页上输入时添加打字震动特效。这个特效会在用户按下键盘上的键时触发。
<!DOCTYPE html>
<html>
<head>
<style>
/ 添加一些样式以使文本更容易看到 /
#text {
fontsize: 24px;
fontweight: bold;
}
</style>
</head>
<body>
<div id="text">开始输入文本</div>
<script>
// 获取显示文本的元素
const textElement = document.getElementById("text");
// 定义一个函数，用于添加震动特效
function addVibrationEffect() {
textElement.style.transform = "translateX(5px)"; // 向右移动5像素
setTimeout(() => {
textElement.style.transform = "translateX(5px)"; // 向左移动5像素
setTimeout(() => {
textElement.style.transform = ""; // 重置位置
}, 50);
}, 50);
}
// 监听键盘按键事件
document.addEventListener("keydown", addVibrationEffect);
// 可以根据需要自定义震动效果的大小和速度
</script>
</body>
</html>这段代码创建一个页面，其中有一个显示文本的 <div> 元素，当用户按下键盘上的键时，文本元素会产生震动效果。你可以根据需要自定义震动效果的大小和速度，只需在 addVibrationEffect 函数中调整 translateX 的值。
请注意，这只是一个简单的示例，可以根据你的需求进行进一步改进和定制。你可以添加更多的样式、动画效果或更复杂的交互来提升用户体验。
