css 实现字体间隔抖动
时间: 2024-09-28 16:17:44 浏览: 41
JS+css实现窗口快速抖动,仿mac、linux系统动画特效!适合于错误提示,弹窗提示,警告窗口等场景!
CSS 实现字体间隔(即行间距)的抖动效果通常通过使用 `letter-spacing` 属性结合 `animation` 或 `keyframes` 动画来完成。你可以设置一个动画,使得 `letter-spacing` 在一段时间内变化,模拟字体随机移动的感觉。下面是一个简单的例子:
```css
@keyframes shake {
0% { letter-spacing: -1px; }
50% { letter-spacing: 2px; }
100% { letter-spacing: -1px; }
}
.shake-text {
animation: shake 0.5s ease-in-out infinite;
/* 如果需要在鼠标悬停时开启动画 */
transition: all 0.3s;
}
.shake-text:hover {
animation-play-state: running;
}
```
在这个例子中,`.shake-text` 类的文本会在 0.5 秒内来回振动,每次变化 1 到 2 像素。当鼠标悬停时,动画会持续播放。
阅读全文