当前位置：首页 > CSS

css3制作印章文字

2026-01-08 18:07:28CSS

使用CSS3制作印章文字效果

圆形印章基础结构 通过HTML创建一个圆形容器，内部放置印章文字。结构示例：

<div class="seal">
  <div class="seal-text">专用章</div>
</div>

核心CSS样式 圆形印章基础样式：

.seal {
  width: 200px;
  height: 200px;
  border: 8px solid #f00;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(255,0,0,0.5);
}

文字环绕效果 使用CSS transform实现环形文字：

css3制作印章文字

.seal-text {
  color: #f00;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,0,0,0.5);
  transform: rotate(-15deg);
  letter-spacing: 2px;
}

复杂印章文字布局 对于需要环绕排版的文字：

<div class="seal-ring">
  <span>中华人民共和国</span>
  <span class="star">★</span>
  <span>公章专用</span>
</div>

环形文字CSS

css3制作印章文字

.seal-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 10s linear infinite;
}

.seal-ring span {
  position: absolute;
  left: 50%;
  transform-origin: 0 100px;
  font-size: 16px;
  color: #f00;
}

.star {
  font-size: 30px;
  transform: translate(-50%, -50%);
}

印章细节增强 添加纹理和破损效果：

.seal::after {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: 
    radial-gradient(circle, transparent 60%, #f00 60%),
    repeating-radial-gradient(circle, #f00 0 1px, transparent 1px 5px);
  opacity: 0.3;
}

动画效果 添加轻微晃动动画更显真实：

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

.seal {
  animation: shake 2s ease-in-out infinite;
}

响应式调整 通过CSS变量控制印章大小：

.seal {
  --seal-size: 200px;
  width: var(--seal-size);
  height: var(--seal-size);
}

@media (max-width: 600px) {
  .seal {
    --seal-size: 150px;
  }
}