纯css制作
纯CSS制作常见效果的方法
图标与形状
使用CSS的border、transform和伪元素可以绘制基本图形。例如绘制三角形：
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}动画效果
通过@keyframes和animation属性实现动画：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 2s linear infinite;
}响应式布局
使用Flexbox或Grid实现自适应布局：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}悬停交互
利用:hover伪类添加交互效果：
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}自定义复选框
隐藏原生控件后用伪元素重构样式：
input[type="checkbox"] {
opacity: 0;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
}
input[type="checkbox"]:checked + label::before {
background: #4CAF50;
}工具提示
通过::after和opacity实现悬浮提示：
.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 5px;
border-radius: 3px;
opacity: 1;
}注意事项
- 复杂动画可能影响性能，需测试不同设备表现
- 某些效果需要配合HTML结构（如多层级嵌套）
- 考虑使用CSS变量（
--var）提高可维护性 - 渐进增强原则：确保基础功能在不支持高级特性的浏览器中仍可用
