css铅笔制作

2026-03-11 14:57:37CSS

使用CSS绘制铅笔效果

通过CSS的伪元素、渐变和变换属性可以模拟铅笔的立体效果。以下是一个完整的实现方案：

<div class="pencil"></div>

.pencil {
  position: relative;
  width: 300px;
  height: 30px;
  background: linear-gradient(
    to right,
    #f5b301 0%,
    #f5b301 20%,
    #2dacfc 20%,
    #2dacfc 40%,
    #f5b301 40%,
    #f5b301 45%,
    #f5b301 60%,
    #f5b301 80%,
    #d91e36 80%,
    #d91e36 100%
  );
  border-radius: 5px;
  transform: rotate(15deg);
}

.pencil::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 5px;
  width: 10px;
  height: 20px;
  background: #ccc;
  border-radius: 5px;
  transform: rotate(45deg);
}

.pencil::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent #111;
}

动画效果增强

添加悬停动画使铅笔更生动：

css铅笔制作

.pencil:hover {
  animation: wiggle 0.5s ease infinite alternate;
}

@keyframes wiggle {
  from { transform: rotate(10deg); }
  to { transform: rotate(20deg); }
}

3D立体版本

通过box-shadow增加深度感：

css铅笔制作

.pencil {
  box-shadow: 
    2px 2px 5px rgba(0,0,0,0.2),
    inset -5px 0 10px rgba(0,0,0,0.1);
}

响应式调整

使用CSS变量控制尺寸：

:root {
  --pencil-length: 300px;
  --pencil-thickness: 30px;
}

.pencil {
  width: var(--pencil-length);
  height: var(--pencil-thickness);
}

@media (max-width: 600px) {
  :root {
    --pencil-length: 200px;
    --pencil-thickness: 20px;
  }
}

关键实现要点包括：