使用css实现文字抖动
在前端开发中，你可以使用CSS的@keyframes动画来实现文字的抖动效果。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字抖动效果</title>
<style>
.shake-text {
font-size: 24px;
animation: shake 0.5s infinite;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0); }
10%, 30%, 50%, 70%, 90% { transform: translate(-5px, 0); }
20%, 40%, 60%, 80% { transform: translate(5px, 0); }
}
</style>
</head>
<body>
<div class="shake-text">这是一段抖动的文字</div>
</body>
</html>
在这个示例中，我们创建了一个名为shake的@keyframes动画。这个动画会在不同的时间点（以百分比表示）应用不同的transform属性，从而使文本在水平方向上左右移动。通过将这些移动组合在一起，并设置动画为无限循环（infinite），我们实现了文本的抖动效果。
你可以根据需要调整动画的持续时间（在这个示例中是0.5s）、移动的距离（在这个示例中是5px），以及抖动的频率和幅度，以达到你想要的效果。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！