当前位置：首页 > CSS

css拟态图标制作

2026-03-12 12:31:41CSS

拟态图标（Neumorphism）设计要点

拟态风格通过柔和的阴影和高光模拟凸起或凹陷的立体效果，需注意以下核心原则：

背景色与图标基色需接近（通常使用相同色系）
阴影分为内阴影和外阴影，方向需一致
光源角度通常设定为左上角45度

基础样式代码示例

.neumorphic-icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: #e0e5ec;
  box-shadow: 
    8px 8px 15px rgba(163, 177, 198, 0.7),
    -8px -8px 15px rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

凹陷效果实现

通过反转阴影方向创造按压效果：

css拟态图标制作

.inset-icon {
  box-shadow: 
    inset 3px 3px 5px rgba(163, 177, 198, 0.7),
    inset -3px -3px 5px rgba(255, 255, 255, 0.8);
}

动态交互增强

添加悬停状态提升用户体验：

.neumorphic-icon:hover {
  box-shadow: 
    4px 4px 10px rgba(163, 177, 198, 0.6),
    -4px -4px 10px rgba(255, 255, 255, 0.7);
  transform: translate(2px, 2px);
  transition: all 0.3s ease;
}

色彩搭配建议

推荐使用HSL色彩模式便于调整明度：

css拟态图标制作

:root {
  --base-hue: 220;
  --bg-color: hsl(var(--base-hue), 20%, 85%);
}

复杂形状处理

非矩形图标需配合SVG实现：

.svg-icon {
  filter: 
    drop-shadow(3px 3px 3px rgba(163,177,198,0.6))
    drop-shadow(-3px -3px 3px rgba(255,255,255,0.8));
}

响应式调整

针对不同设备尺寸优化阴影强度：

@media (max-width: 768px) {
  .neumorphic-icon {
    box-shadow: 
      4px 4px 8px rgba(163, 177, 198, 0.6),
      -4px -4px 8px rgba(255, 255, 255, 0.7);
  }
}