css3制作印章文字
使用CSS3制作印章文字效果
要实现印章文字效果，可以通过CSS3的text-stroke、border-radius和transform等属性模拟印章的圆形边框和文字描边效果。
HTML结构
<div class="seal">
<span class="seal-text">专用章</span>
</div>CSS样式
.seal {
width: 200px;
height: 200px;
border: 5px solid #f00;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.seal-text {
color: transparent;
font-size: 36px;
font-weight: bold;
-webkit-text-stroke: 2px #f00;
text-stroke: 2px #f00;
transform: rotate(-15deg);
}
.seal::before {
content: "★";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f00;
font-size: 24px;
}添加五角星和环形文字
更复杂的印章效果可以包含五角星和环形排列的文字：
<div class="seal-advanced">
<div class="star">★</div>
<div class="circle-text">中华人民共和国</div>
</div>.seal-advanced {
width: 300px;
height: 300px;
border: 8px solid #f00;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.star {
color: #f00;
font-size: 60px;
position: absolute;
}
.circle-text {
position: absolute;
width: 100%;
height: 100%;
animation: rotate 15s linear infinite;
}
.circle-text span {
position: absolute;
left: 50%;
font-size: 24px;
transform-origin: 0 150px;
color: #f00;
font-weight: bold;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}使用SVG实现更精确的印章
对于更专业的印章效果，可以使用SVG：
<svg width="300" height="300" viewBox="0 0 300 300">
<circle cx="150" cy="150" r="140" fill="none" stroke="red" stroke-width="5"/>
<path id="textPath" d="M50,150a100,100 0 1,1 200,0a100,100 0 1,1 -200,0"/>
<text fill="red" font-size="24" font-weight="bold">
<textPath xlink:href="#textPath" startOffset="50%">· 中华人民共和国 ·</textPath>
</text>
<text x="150" y="160" text-anchor="middle" fill="red" font-size="60">★</text>
<text x="150" y="190" text-anchor="middle" fill="red" font-size="30" font-weight="bold">专用章</text>
</svg>注意事项
- 文字描边使用
text-stroke属性时需注意浏览器兼容性，可能需要添加-webkit-前缀 - 环形文字布局需要精确计算字符间距和位置
- 印章颜色通常使用红色(#f00或#c00)
- 响应式设计时应使用相对单位(如vw/vh)确保印章大小适应不同屏幕
以上方法可根据实际需求组合使用，CSS3方案适合简单印章效果，SVG方案则能实现更复杂精确的印章设计。
