扇形文字 css3

扇形文字是一种独特而有趣的方式来展示文本信息。借助CSS3的强大功能，我们可以轻松地创建出美丽的扇形文字效果，使得网站的设计更加生动有趣。

.circle-text {
    display: inline-block;
    position: relative;
    padding: 0.4rem 1rem;
    font-size: 1.2rem;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    background-color: #0078e7;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateY(35deg) rotateZ(-45deg);
    box-shadow: 0 0 10px #0078e7;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
.circle-text:before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform-origin: 0 0;
    transform: rotateZ(-45deg) translateX(-50%);
}
.circle-text:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: inherit;
    transform-origin: 100% 0;
    transform: rotateZ(45deg);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
    

这段代码实现了一个圆形的文本框，并且将文本沿着圆弧排列。代码中，我们创建了一个圆形的块级元素，利用border-radius属性将其变成一个正圆形，再利用transform: perspective()将其变成3D效果。接着，我们分别利用:before和:after伪元素添加了文本框内的文字和左半圆的遮罩效果。最终，我们成功地实现了一个美丽的扇形文字效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！