制作css icon
使用CSS制作图标的方法
纯CSS绘制基本形状
通过CSS的border、width、height等属性可以创建简单图标，例如三角形：
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #ff6b6b;
}伪元素增强效果
利用::before和::after伪元素叠加复杂图形：
.heart {
position: relative;
width: 40px;
height: 40px;
}
.heart::before, .heart::after {
content: "";
position: absolute;
width: 20px;
height: 32px;
background: #ff4757;
border-radius: 20px 20px 0 0;
}
.heart::before {
transform: rotate(-45deg);
left: 20px;
}
.heart::after {
transform: rotate(45deg);
right: 20px;
}CSS渐变与阴影
通过linear-gradient和box-shadow实现立体感：
.sun {
width: 50px;
height: 50px;
background: radial-gradient(circle, #ffd700 30%, transparent 31%);
box-shadow: 0 0 10px #ffd700;
border-radius: 50%;
}动画交互效果
添加transition或@keyframes使图标动态化：
.loading {
width: 30px;
height: 30px;
border: 4px solid #dfe6e9;
border-top: 4px solid #0984e3;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}优化技巧
- 使用
currentColor继承父元素文字颜色增强可维护性 - 通过
transform: scale()调整图标大小而非修改宽高 - 对复杂图标考虑组合多个HTML元素简化CSS逻辑
资源参考
- CSS Tricks图标教程
- Animista动画库提供现成动画代码片段
