css3手工制作图片

使用 CSS3 绘制基本图形

通过 border、background 和 box-shadow 等属性可以绘制简单图形。例如，圆形可以通过 border-radius: 50% 实现：

.circle {
  width: 100px;
  height: 100px;
  background: #ff6b6b;
  border-radius: 50%;
}

利用伪元素扩展图形

伪元素 ::before 和 ::after 可叠加更多形状。例如，用两个三角形组合成心形：

.heart {
  position: relative;
  width: 60px;
  height: 60px;
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 50px;
  background: #ff4757;
  border-radius: 30px 30px 0 0;
}
.heart::before {
  transform: rotate(-45deg);
  left: 15px;
}
.heart::after {
  transform: rotate(45deg);
  right: 15px;
}

使用渐变和阴影增强效果

线性渐变（linear-gradient）和径向渐变（radial-gradient）可模拟光照或纹理：

.sun {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ffd700, #ff8c00);
  border-radius: 50%;
  box-shadow: 0 0 30px #ffd700;
}

动画交互效果

通过 @keyframes 和 transition 添加动态效果。例如旋转的加载图标：

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

组合复杂图形

通过多元素和变换（transform）组合更复杂的图案，如云朵：

.cloud {
  position: relative;
  width: 120px;
  height: 60px;
  background: #ecf0f1;
  border-radius: 60px;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #ecf0f1;
  border-radius: 50%;
}
.cloud::before {
  width: 50px;
  height: 50px;
  top: -20px;
  left: 20px;
}
.cloud::after {
  width: 30px;
  height: 30px;
  top: -10px;
  right: 20px;
}

响应式适配

使用 vw、vh 或百分比单位确保图形适应不同屏幕尺寸：

.responsive-circle {
  width: 20vw;
  height: 20vw;
  background: #55efc4;
  border-radius: 50%;
}