css制作公章
使用CSS制作公章效果
通过CSS的border-radius、box-shadow和渐变等属性可以模拟公章效果。以下是实现方法：
基础圆形结构
<div class="seal"></div>CSS样式设计
.seal {
width: 200px;
height: 200px;
border-radius: 50%;
border: 8px solid red;
position: relative;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}添加五角星元素
.seal::before {
content: "★";
font-size: 60px;
color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}环形文字效果
<div class="seal">
<div class="seal-text">专用公章</div>
</div>.seal-text {
position: absolute;
width: 100%;
height: 100%;
animation: rotate 10s linear infinite;
font-size: 24px;
font-weight: bold;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}细节优化
- 使用
text-stroke增加文字描边 - 添加径向渐变模拟印章质感
- 调整阴影参数增强立体感
.seal {
background: radial-gradient(circle, transparent 60%, rgba(255,0,0,0.1) 100%);
}
.seal-text {
color: transparent;
-webkit-text-stroke: 1px red;
text-stroke: 1px red;
}SVG实现方案
对于更复杂的公章效果，可以使用SVG：
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="90" fill="none" stroke="red" stroke-width="8"/>
<path d="M100 30 L120 80 L170 80 L130 110 L150 160 L100 130 L50 160 L70 110 L30 80 L80 80 Z" fill="red"/>
<path id="textPath" d="M50,100 A50,50 0 1,1 150,100 A50,50 0 1,1 50,100"/>
<text font-size="16" fill="red">
<textPath xlink:href="#textPath" startOffset="50%">· 中华人民共和国 ·</textPath>
</text>
</svg>注意事项
- 调整圆环宽度和颜色匹配实际公章效果
- 文字间距和大小需要精确控制
- 考虑添加噪点或纹理增强真实感
- 响应式设计时保持圆形比例
以上方法可根据实际需求组合使用，通过CSS变量可以方便地调整公章尺寸和颜色。
