当前位置：首页 > CSS

css印章制作

2026-03-11 18:42:37CSS

使用CSS制作印章效果

通过CSS可以创建逼真的印章效果，结合边框、文本和伪元素实现。以下是几种常见方法：

圆形印章效果

.stamp {
  width: 150px;
  height: 150px;
  border: 3px solid #c00;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-family: 'SimSun', serif;
  color: #c00;
}

.stamp::before {
  content: "★";
  position: absolute;
  top: 10px;
  font-size: 24px;
}

方形印章效果

.square-stamp {
  width: 180px;
  height: 80px;
  border: 2px dashed #c00;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-15deg);
  font-family: 'KaiTi', cursive;
  color: #c00;
  opacity: 0.8;
}

弧形文字效果

.arc-text {
  position: absolute;
  top: 30px;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

.arc-text span {
  display: inline-block;
  transform: rotate(calc(var(--i) * 10deg - 50deg));
  transform-origin: 0 70px;
}

HTML结构示例

<div class="stamp">
  <div class="arc-text">
    <span>公</span>
    <span>章</span>
    <span>专</span>
    <span>用</span>
  </div>
  <div class="center-text">财务专用</div>
</div>

印章特效增强

模糊边缘效果

.stamp-effect {
  box-shadow: 0 0 5px rgba(200, 0, 0, 0.5);
  filter: blur(0.5px);
  background-image: radial-gradient(transparent 50%, rgba(200,0,0,0.1));
}

破损效果

.damaged-stamp {
  position: relative;
  overflow: hidden;
}

.damaged-stamp::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    #fff 46%,
    #fff 54%,
    transparent 55%
  );
  opacity: 0.6;
}

动画效果

盖章动画

css印章制作

@keyframes stamp {
  0% { transform: scale(3); opacity: 0; }
  80% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-stamp {
  animation: stamp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

这些CSS技巧可以组合使用，通过调整颜色、大小和文字内容，可以创建各种类型的印章效果。对于更复杂的设计，可以结合SVG或Canvas实现更精细的控制。