css字体在圆形中间代码 |css动画倒放

.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f2f2f2;
font-size: 24px;
}
.circle::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
}
.circle p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
text-align: center;
}

上述代码会生成一个半径为100px的圆形，其中伪元素::before用于生成在圆形中心位置的小点。而CSS中的transform属性主要用于设置元素的位置以及缩放比例、旋转角度等。

最后，将文本内容加入到圆形中即可使用CSS字体在圆形中心位置。注意，因为使用了绝对定位并设置了top和left为50%，所有文本应该使用绝对定位并设置相应的transform属性来实现位置的准确计算。