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);