当前位置：首页 > CSS

css制作公章

2026-04-01 13:01:43CSS

使用CSS制作公章效果

使用CSS可以模拟公章的圆形、文字环绕和五角星等元素。以下是一个完整的实现方案：

HTML结构

<div class="seal">
  <div class="star"></div>
  <div class="text">专用章</div>
  <div class="circle-text">某某科技有限公司</div>
</div>

CSS样式

.seal {
  position: relative;
  width: 200px;
  height: 200px;
  border: 3px solid red;
  border-radius: 50%;
  margin: 50px auto;
  text-align: center;
}

.star {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-size: 60px;
}

.text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  color: red;
  font-size: 24px;
  font-weight: bold;
}

.circle-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: rotate 15s linear infinite;
}

.circle-text::before {
  content: "某某科技有限公司";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  color: red;
  font-size: 16px;
  text-align: center;
  transform-origin: 0 100px;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

实现细节说明

圆形边框 通过设置border-radius: 50%创建圆形边框，配合border属性设置红色边框模拟公章外圈。

五角星 使用Unicode字符★(★)作为五角星，通过绝对定位居中显示。可以调整font-size控制大小。

环绕文字 利用CSS动画实现文字环绕效果。transform-origin属性设置旋转中心点，animation实现无限旋转。

中间文字 "专用章"文字通过绝对定位放置在公章中央下方，使用较大字号和加粗突出显示。

进阶优化

更精确的环绕文字 如果需要更精确控制每个字符位置，可以使用SVG或JavaScript实现：

const text = "某某科技有限公司";
const radius = 80;
const angle = 360 / text.length;

text.split("").forEach((char, i) => {
  const span = document.createElement("span");
  span.textContent = char;
  span.style.position = "absolute";
  span.style.transform = `rotate(${angle * i}deg) translate(0, -${radius}px)`;
  document.querySelector(".circle-text").appendChild(span);
});

SVG实现方案 SVG能提供更精确的文字路径控制：

css制作公章

<svg width="200" height="200">
  <circle cx="100" cy="100" r="95" stroke="red" stroke-width="3" fill="none"/>
  <path id="text-path" d="M30,100 a70,70 0 1,1 140,0 a70,70 0 1,1 -140,0"/>
  <text fill="red" font-size="16">
    <textPath href="#text-path" startOffset="50%">某某科技有限公司</textPath>
  </text>
  <text x="100" y="120" fill="red" font-size="24" text-anchor="middle">专用章</text>
  <polygon points="100,40 104,60 124,60 108,72 112,92 100,80 88,92 92,72 76,60 96,60" fill="red"/>
</svg>