以下是一个使用CSS制作文字粉碎效果的示例:

HTML代码:

Hello, World!

CSS代码:
css
.text-container {
position: relative;
width: fit-content;
margin: auto;
perspective: 1000px;
}

.shattered-text {
position: relative;
font-size: 48px;
font-weight: bold;
color: #333;
text-transform: uppercase;
transform-style: preserve-3d;
transform-origin: center;
animation: shatter 1.5s forwards;
}

@keyframes shatter {
0% {
transform: translateZ(0);
}
50% {
opacity: 0;
}
100% {
transform: translateZ(5000px);
}
}

上述代码将创建一个包含文本的容器,并将其置于视点的透视下。通过设置`perspective`属性,我们可以控制透视效果的强度。在文本样式中,我们使用了`transform-style: preserve-3d`和`transform-origin: center`属性来创建3D视觉效果。然后,我们定义了一个名为`shatter`的动画,将文本从正常位置移动到离观察者很远的位置,并在过程中逐渐变成透明。最后,我们使用`animation`属性将动画应用于文本元素。

你可以根据需要调整文本或容器的样式,以实现所需的效果。