当前位置：首页 > CSS

css 制作字帖

2026-01-28 10:27:44CSS

使用 CSS 制作字帖

基础网格设计

通过 CSS 的 background 属性创建田字格或米字格背景。田字格可通过线性渐变实现，米字格需叠加斜向渐变：

.tianzige {
  background: 
    linear-gradient(to right, #ccc 1px, transparent 1px),
    linear-gradient(to bottom, #ccc 1px, transparent 1px);
  background-size: 20px 20px;
}
.mizige {
  background: 
    linear-gradient(45deg, #ccc 1px, transparent 1px),
    linear-gradient(-45deg, #ccc 1px, transparent 1px),
    linear-gradient(to right, #ccc 1px, transparent 1px),
    linear-gradient(to bottom, #ccc 1px, transparent 1px);
  background-size: 20px 20px;
}

文字定位与样式

使用绝对定位将汉字精确放置在网格交叉点，通过 text-align 和 line-height 控制居中：

css 制作字帖

.character {
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
  font-family: "KaiTi", "STKaiti", serif;
}

动态交互效果

添加 :hover 伪类实现描红效果，结合动画增强体验：

css 制作字帖

.character:hover {
  color: red;
  animation: trace 2s forwards;
}
@keyframes trace {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

响应式适配

通过媒体查询调整网格大小以适应不同设备：

@media (max-width: 768px) {
  .tianzige, .mizige {
    background-size: 15px 15px;
  }
  .character {
    width: 15px;
    height: 15px;
    font-size: 12px;
  }
}

完整示例结构

HTML 骨架需包含网格容器和动态生成的汉字元素：

<div class="tianzige">
  <div class="character" style="top: 20px; left: 20px;">永</div>
  <div class="character" style="top: 20px; left: 40px;">字</div>
</div>