CSS 制作文字戳动效果可以使用伪元素和动画来实现。
首先，我们需要为文字添加一个父元素，然后为父元素设置 position: relative; 属性，以便使其成为子元素的定位参考点。
接下来，我们使用伪元素 ::before 和 ::after 来创建两个小圆点。这两个小圆点将作为文字戳动的效果，因此我们需要为它们设置样式，如 background-color、width、height、border-radius 等。
然后，我们将这两个小圆点定位到父元素的左上角和右下角。这可以通过设置它们的 position 为 absolute，然后分别为它们的 top、left、bottom 和 right 属性设置值来实现。
最后，我们使用 CSS 动画为这两个小圆点添加动效。可以使用 @keyframes 规则创建动画，然后将其应用于伪元素的 transform 属性上。
以下是一个示例代码：
.text-container {
position: relative;
}
.text-container::before,
.text-container::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}
.text-container::before {
top: 0;
left: 0;
}
.text-container::after {
bottom: 0;
right: 0;
}
@keyframes stamp {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.text-container:hover::before,
.text-container:hover::after {
animation: stamp 0.3s ease-in-out;
}在这个示例中，当鼠标悬停在包含文字的父元素上时，伪元素 ::before 和 ::after 将开始动画，并在0.3秒内缩放，从而实现戳动的效果。