css烟花成字 |css怎么写三角形

@keyframes fireworks{
50%{
transform: translate(50px, -150px);
opacity: 0;
}
100%{
transform: translate(100px, -200px);
opacity: 0;
}
}
.text{
font-size: 100px;
font-family: Arial, sans-serif;
color: transparent;
background-image: radial-gradient(circle at bottom left, #f00, #ff0, #0f0, #00f, #f0f, #f00);
-webkit-background-clip: text;
animation: fireworks 2.5s ease-out forwards;
}

如上所示，通过使用CSS3的关键帧动画（@keyframes）和背景裁剪（background-clip）来实现。首先，通过关键帧动画设置烟花的动画效果。然后将烟花的颜色设为渐变色，同时将背景裁剪属性设置为text，将烟花固定在文字的轮廓中。最后通过animation属性将动画应用到文本上。

这种技术可以制作非常漂亮的标题字体效果，从而使网站的设计更加优雅。