当前位置：首页 > CSS

css铅笔制作

2026-01-28 08:08:49CSS

使用CSS制作铅笔效果

通过CSS可以创建逼真的铅笔图形效果，主要利用渐变、旋转和伪元素实现立体感。

基础铅笔结构

.pencil {
  width: 200px;
  height: 20px;
  position: relative;
  background: linear-gradient(
    to right,
    #f5d76e 0%,  /* 木质部分 */
    #f5d76e 70%,
    #e74c3c 70%,  /* 金属环 */
    #e74c3c 75%,
    #3498db 75%,  /* 笔身 */
    #3498db 95%,
    #2ecc71 95%   /* 笔尖 */
  );
  transform: rotate(5deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

添加铅笔细节

.pencil::before {
  content: "";
  position: absolute;
  left: 70%;
  top: -5px;
  height: 30px;
  width: 5px;
  background: #bdc3c7;  /* 金属环立体感 */
  transform: rotate(15deg);
}

.pencil::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #27ae60;  /* 笔尖三角形 */
}

3D效果增强

.pencil {
  transform-style: preserve-3d;
  transform: rotateY(20deg) rotateX(10deg);
}

.pencil::after {
  transform: translateZ(-5px);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}

动画效果（可选）

@keyframes write {
  0% { transform: translateX(0) rotate(5deg); }
  50% { transform: translateX(100px) rotate(7deg); }
  100% { transform: translateX(0) rotate(5deg); }
}

.pencil {
  animation: write 2s ease-in-out infinite;
}

通过调整颜色、尺寸和角度参数，可以创建不同风格的铅笔效果。金属环部分可使用box-shadow增加高光，笔尖部分可用多重边框创建削尖效果。

css铅笔制作