纯css3制作css

纯CSS3制作常见效果的方法

悬停动画效果 利用CSS3的transition和transform属性可以创建平滑的悬停动画。例如按钮放大效果：

.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

加载动画 通过@keyframes创建旋转动画：

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

卡片翻转效果 结合transform-style和perspective实现3D翻转：

.card {
  perspective: 1000px;
}
.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card:hover .card-inner {
  transform: rotateY(180deg);
}

渐变背景 使用linear-gradient创建彩色渐变：

.background {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

响应式网格布局 通过grid实现自适应布局：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

文字阴影效果 添加多层阴影创造立体感：

.text-effect {
  text-shadow: 
    0 1px 0 #ccc,
    0 2px 0 #bbb,
    0 3px 0 #aaa;
}

自定义复选框 用appearance和伪元素改造表单元素：

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
}
input[type="checkbox"]:checked {
  background-color: #4CAF50;
}