css铅笔制作

CSS 铅笔制作方法

使用CSS绘制铅笔可以通过纯代码实现，无需图片素材。以下是详细的实现步骤：

HTML结构

<div class="pencil">
  <div class="tip"></div>
  <div class="body"></div>
  <div class="ferrule"></div>
  <div class="eraser"></div>
</div>

CSS样式

.pencil {
  position: relative;
  width: 300px;
  height: 40px;
  margin: 100px auto;
}

.tip {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid #f8b62b;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  left: 0;
}

.body {
  position: absolute;
  width: 200px;
  height: 40px;
  background: #f8b62b;
  left: 20px;
}

.ferrule {
  position: absolute;
  width: 30px;
  height: 40px;
  background: silver;
  left: 220px;
}

.eraser {
  position: absolute;
  width: 30px;
  height: 40px;
  background: pink;
  left: 250px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

进阶美化技巧

添加铅笔条纹细节可以增强真实感：

.body {
  background: linear-gradient(
    to right,
    #f8b62b 0%,
    #f8b62b 85%,
    #333 85%,
    #333 90%,
    #f8b62b 90%
  );
}

.ferrule {
  background: linear-gradient(
    to right,
    #ccc 0%,
    #fff 30%,
    #ccc 70%,
    #999 100%
  );
}

动画效果实现

让铅笔旋转的动画效果：

.pencil {
  transform-origin: 20px 20px;
  animation: spin 2s infinite linear;
}

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

响应式调整

根据不同屏幕尺寸调整铅笔大小：

@media (max-width: 600px) {
  .pencil {
    transform: scale(0.7);
  }
}

通过组合这些CSS技术，可以创建出逼真的铅笔图形，并添加各种交互效果。调整颜色、尺寸和细节可以制作不同风格的铅笔。