首字母旋转动画可通过CSS实现，先用::first-letter选中首字母并设置样式，再结合transform: rotate()与@keyframes定义旋转动画，最后通过animation属性应用动画，支持无限循环或:hover触发，提升文本视觉吸引力。
要实现段落首字母的旋转动画，可以结合 CSS 的 ::first-letter 伪元素、transform 属性和 animation 动画来完成。这种方法常用于美化文章开头，让首字母具有视觉吸引力。
1. 使用 ::first-letter 选中首字母
通过 ::first-letter 可以选中块级元素（如 p 标签）中的第一个字母。这个伪元素允许你单独设置首字母的样式，比如字体大小、颜色、浮动等。示例 HTML：
<p class="fancy-paragraph">这是一段示例文字，首字母将被放大并旋转。</p>
CSS 基础样式：
.fancy-paragraph::first-letter {
font-size: 3em;
float: left;
margin-right: 5px;
color: #d63384;
}
2. 添加 transform 实现旋转
在 ::first-letter 中使用 transform: rotate() 可以让首字母旋转一定角度。配合 display: inline-block 可确保 transform 生效。更新后的样式：
.fancy-paragraph::first-letter {
font-size: 3em;
float: left;
margin-right: 5px;
color: #d63384;
display: inline-block;
transform: rotate(-15deg);
}
3. 结合 animation 制作动态旋转效果
定义一个 @keyframes 动画，让首字母从一个角度旋转到另一个角度，再应用到 ::first-letter 上。完整动画示例：
@keyframes spin-letter {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.fancy-paragraph::first-letter {
font-size: 3em;
float: left;
margin-right: 5px;
color: #d63384;
display: inline-block;
animation: spin-letter 1.5s ease-in-out infinite alternate;
}
说明：
- spin-letter 定义了从 0° 到 360° 的旋转过程
- ease-in-out 让动画更自然
- infinite 表示无限循环
- alternate 让动画来回播放
4. 可选优化：控制动画触发时机
如果不想让动画一直播放，可以通过 :hover 控制只在鼠标悬停时触发。示例：
.fancy-paragraph:hover::first-letter {
animation: spin-letter 1s ease-out forwards;
}
这样用户将鼠标移到段落上时，首字母才开始旋转一次并停止。
基本上就这些。利用 ::first-letter 和 transform 配合 animation，就能轻松实现富有设计感的首字母动画效果，不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
