如何用css animation实现文字阴影变化-css教程-PHP中文网

如何用css animation实现文字阴影变化

P粉602998670

发布： 2025-10-07 21:10:01

原创

516人浏览过

使用CSS @keyframes和text-shadow属性可实现文字阴影动画。通过在关键帧中改变阴影的偏移、模糊度和颜色，能创建脉冲发光或拖尾等动态效果。例如，pulseShadow动画通过调整text-shadow的模糊半径和颜色，使文字产生呼吸式发光；slideShadow则通过改变水平和垂直偏移，实现阴影移动的拖尾感。应用时需注意性能优化，避免过多阴影层导致卡顿，建议使用ease-in-out缓动函数提升流畅度，并确保背景与阴影颜色对比明显以增强视觉效果。结合animation属性可让动画无限循环，适用于标题或高亮文本的动态展示。

如何用css animation实现文字阴影变化

实现文字阴影变化的动画，可以通过 CSS 的 @keyframes 和 animation 属性来完成。核心是使用 text-shadow 属性，并在关键帧中改变其颜色、模糊度或偏移值，从而产生动态的视觉效果。

1. 基础语法与属性说明

text-shadow 的格式为：

text-shadow: 水平偏移垂直偏移模糊半径阴影颜色;

例如：

text-shadow: 2px 2px 5px rgba(0,0,0,0.5);

在动画中，可以逐步改变这些值，让阴影“动”起来。

立即学习“前端免费学习笔记（深入）”；

2. 创建阴影脉冲效果

下面是一个让文字阴影由小变大再缩小，模拟发光脉冲的动画示例：

绘影字幕

视频字幕制作神器、轻松编辑影片

查看详情

@keyframes pulseShadow { 0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0080ff; } 50% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0080ff; } 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0080ff; } } .animated-text { font-size: 40px; color: white; animation: pulseShadow 2s ease-in-out infinite; }

这个动画会让文字周围出现类似霓虹灯的呼吸式发光效果。

3. 实现左右移动的阴影拖尾效果

如果你想让阴影有“拖尾”感，可以结合偏移和模糊值的变化：

@keyframes slideShadow { 0% { text-shadow: 0 0 5px rgba(255,255,255,0.8); } 50% { text-shadow: 10px 5px 10px rgba(255,255,255,0.6); } 100% { text-shadow: 0 0 5px rgba(255,255,255,0.8); } }

配合一个块级容器，可以增强动感。注意透明度控制避免过于刺眼。