css3制作印章文字
使用CSS3制作印章文字
通过CSS3的transform、border-radius和text-shadow等属性，可以模拟传统印章的文字效果。以下是实现方法：
圆形印章基础样式
.seal {
width: 200px;
height: 200px;
border: 3px solid #c00;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}环形文字排列 使用CSS旋转变换实现文字环绕效果：
.seal-text {
position: absolute;
width: 100%;
height: 100%;
animation: rotate 15s linear infinite;
}
.seal-text span {
position: absolute;
left: 50%;
transform-origin: 0 100px;
font-size: 16px;
font-weight: bold;
color: #c00;
text-transform: uppercase;
}中心文字样式
.center-text {
font-size: 36px;
font-weight: bold;
color: #c00;
text-shadow: 0 0 2px rgba(0,0,0,0.3);
transform: rotate(-15deg);
}破损纹理效果 通过伪元素添加不规则边缘：
.seal::after {
content: "";
position: absolute;
width: 90%;
height: 90%;
border: 1px solid #c00;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
opacity: 0.7;
}HTML结构示例
<div class="seal">
<div class="seal-text">
<!-- 每个span需要单独设置旋转角度 -->
<span style="transform: rotate(30deg)">★</span>
<span style="transform: rotate(60deg)">专</span>
<!-- 更多文字... -->
</div>
<div class="center-text">印</div>
</div>关键实现技巧
文字环绕计算 每个字符需要根据圆周长和字符数量计算旋转角度。公式为： 360deg / 字符总数 = 每个字符的旋转增量
边缘粗糙化处理
通过box-shadow和多重边框模拟印章边缘的不规则效果：
border: 3px solid #c00;
box-shadow:
0 0 0 2px rgba(255,0,0,0.3),
0 0 0 4px rgba(255,0,0,0.2);颜色选择建议
- 使用深红色(#c00或#900)模拟传统印泥效果
- 添加半透明的rgba颜色增强层次感
- 文字颜色建议使用同色系但更深的色调
响应式调整 通过CSS变量方便调整印章大小：
.seal {
--size: 200px;
width: var(--size);
height: var(--size);
}浏览器兼容性说明
该效果主要依赖CSS3特性，建议在现代浏览器中使用。如需支持旧版浏览器，可添加以下前缀：
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
