css字的动画效果图 |css 标记气泡

@keyframes bounce {
0% {transform: translateY(0);}
50% {transform: translateY(-20px);}
100% {transform: translateY(0);}
} 
h1 {
animation: bounce 2s infinite;
}

上述代码展示了一个简单的字体弹跳效果。关键帧 @keyframes 定义了弹跳的动画，规定了字体状态的变化。在 h1 元素上应用 animation 属性，即可实现该效果。

@keyframes light {
0% {color: #fff;}
50% {color: #ffc107;}
100% {color: #fff;}
}
h2 {
text-shadow: 1px 1px #666;
animation: light 2s infinite;
}

此代码片段演示了另一个有趣的效果：字体闪烁。通过应用 text-shadow 属性，可以让字体在浅色背景上更加清晰，并在动画中切换字体颜色。

@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
h3 {
animation: rotate 2s linear infinite;
}

你还可以制作旋转动画，在这个例子中，@keyframes 规定了字体逆时针旋转 360 度的动画。在 h3 元素上应用 animation 属性，即可实现字体的旋转。

CSS 字体动画为网页带来了更加丰富的效果，可以使网站更加生动有趣。尝试使用不同的关键帧组合和属性，你可能会发现更多惊艳的效果。