css高级效果制作

CSS 高级效果制作方法

阴影与模糊效果
使用 box-shadow 和 filter: blur() 实现立体感和朦胧效果。

.box {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  filter: blur(2px);
}

渐变与混合模式
通过 linear-gradient 和 mix-blend-mode 创建色彩叠加效果。

.element {
  background: linear-gradient(45deg, #ff3366, #8833ff);
  mix-blend-mode: multiply;
}

动画与过渡
利用 @keyframes 和 transition 实现动态交互。

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 2s linear infinite;
}

3D 变换
结合 transform-style: preserve-3d 和 perspective 制作三维空间效果。

.container {
  perspective: 1000px;
}
.card {
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}

裁剪与遮罩
使用 clip-path 和 mask-image 控制元素显示区域。

.shape {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  mask-image: url('mask.png');
}

响应式设计技巧
通过 @media 和 calc() 适配不同设备。

@media (max-width: 768px) {
  .responsive {
    width: calc(100% - 20px);
  }
}

变量与自定义属性
CSS 变量（--var）提升代码复用性。

:root {
  --main-color: #3498db;
}
.button {
  background-color: var(--main-color);
}