CSS3渐变、过渡、转换、动画

CSS3渐变（Gradients）:

/* 线性渐变 */
.linear-gradient {
  background: linear-gradient(to right, red, yellow);
}
 
/* 径向渐变 */
.radial-gradient {
  background: radial-gradient(circle, red, yellow);
}

CSS3过渡（Transitions）:

/* 应用于所有元素的过渡效果 */
.transition-all {
  transition: all 0.5s ease-in-out;
}
 
/* 仅应用于背景颜色的过渡效果 */
.transition-background {
  transition: background-color 0.5s ease-in-out;
}

CSS3转换（Transforms）:

/* 2D转换：旋转45度 */
.rotate-45 {
  transform: rotate(45deg);
}
 
/* 2D转换：缩放1.5倍 */
.scale-150 {
  transform: scale(1.5);
}
 
/* 3D转换：旋转3D对象 */
.rotate-3d {
  transform: rotate3d(1, 1, 1, 45deg);
}

CSS3动画（Animations）:

/* 定义一个名为fadeIn的动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 应用动画效果到元素 */
.animate-fadeIn {
  animation: fadeIn 2s ease-in-out;
}

使用这些CSS3特性可以创建更加引人注目的网页设计。