使用CSS与JavaScript实现文字虚幻抖动效果【CSS基础入门100例】
关注IT技术视界公众号，获取好玩有趣软件！
先领1T空间！再存有趣资源！仅有一次机会！
在网页设计中，文字虚幻抖动效果 可以营造出一种神秘的视觉体验，常用于科幻风格的页面或动态标题展示。本次示例通过 CSS + JavaScript 结合，让文字在屏幕上不断抖动，制造出虚影效果。
🎨 效果展示
该效果会让文字不停地轻微抖动，营造出一种虚幻的漂浮感。适用于 科技感网站、游戏界面、个性化标题 等场景。
IT技术视界
好软件值得被看见
好软件值得被看见
（由于网页安全策略，实际抖动效果需在本地运行）
📌 完整代码
你可以直接复制以下代码，在你的 HTML 文件中运行，体验虚幻抖动效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文字虚幻抖动</title>
</head>
<body style="background-color: #000;">
<div id="Title2" style="color: gray; font: bold 50px Arial; position: absolute; visibility:hidden; top:200px; left:300px;">
<p>AmoXiang<br>好软件值得被看见</p>
</div>
<div id="Title1" style="color: inherit; font: bold 50px Arial; position: absolute; visibility:hidden; top:200px; left:300px;">
<p>AmoXiang<br>好软件值得被看见</p>
</div>
<script>
var Tle2 = document.getElementById("Title2").style;
var Tle1 = document.getElementById("Title1").style;
// 让文字居中
Tle2.top = Tle1.top = (window.innerHeight / 2 - 20) + "px";
Tle2.left = Tle1.left = (window.innerWidth / 2 - 150) + "px";
function Fade() {
var BackX = Math.random() * 10;
var BackY = Math.random() * 5;
if (Math.random() < 0.5) {
BackX = -BackX;
BackY = -BackY;
}
Tle1.visibility = Tle2.visibility = "visible";
Tle2.left = (parseInt(Tle1.left) + BackX) + "px";
Tle2.top = (parseInt(Tle1.top) + BackY) + "px";
setTimeout(Fade, 50);
}
Fade();
</script>
</body>
</html>📖 JavaScript 代码解析
| 代码部分 | 描述 |
|---|---|
document.getElementById("Title1").style |
获取文字层 Title1 的样式控制权。 |
window.innerHeight / 2 - 20 |
计算 窗口居中位置，使文字水平居中显示。 |
Math.random() * 10 |
生成 0~10 的随机值，控制文字的 横向抖动。 |
Math.random() * 5 |
生成 0~5 的随机值，控制文字的 纵向抖动。 |
if (Math.random() < 0.5) |
50% 概率让文字 向左/右、上/下抖动，增加随机性。 |
setTimeout(Fade, 50); |
每 50 毫秒调用一次 Fade()，让文字持续抖动。 |
📌 代码解析
-
创建两个重叠的文字层
#Title1（白色文字）：静止不动的主要文字。#Title2（灰色文字）：用于制造虚影，轻微抖动。
-
随机偏移制造抖动感
Math.random() * 10和Math.random() * 5让灰色文字 在 10px 内小幅度抖动，制造虚幻感。
-
定时调用
Fade()形成持续抖动setTimeout(Fade, 50);让抖动效果不断循环，实现动态虚影。
🚀 结语
通过 CSS 绝对定位 + JavaScript 随机偏移，可以轻松实现 文字虚幻抖动 效果。这种效果常用于 科幻风格网页、游戏加载界面、特效文字标题，给网页带来独特的动感和神秘感！🎉✨
THE END