用 CSS 制作令人惊叹的 UI 实例

2023-12-06 07:19:05

我们经常会被告知，JavaScript 或框架是制作交互式 UI 的唯一方法。但事实上，CSS 也能做到很多。在这篇文章中，我们将通过一系列引人注目的实例来探索用纯 CSS 创建令人惊叹的 UI 的可能性。

案例 1：无缝按钮切换

交互式按钮是任何 UI 的基石。使用 CSS，我们可以创建外观精美的按钮，并在用户交互时无缝切换它们。

.button {
  border: 1px solid black;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s;
}

.button:hover {
  background-color: #ccc;
}

.button:active {
  background-color: #999;
}

案例 2：响应式网格布局

创建适应不同屏幕尺寸的响应式布局至关重要。使用 CSS Grid，我们可以轻松地创建具有不同列和行的网格布局。

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

.grid-item {
  background-color: #ccc;
  padding: 10px;
  margin: 10px;
}

案例 3：纯 CSS 幻灯片

幻灯片组件是展示内容的一种流行方式。使用 CSS Transitions 和 Animations，我们可以创建流畅的幻灯片效果，无需任何 JavaScript。

.slider {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

案例 4：悬浮效果

悬浮效果可以为元素添加深度和交互性。使用 CSS Box Shadow 和 Filters，我们可以创建各种悬浮效果。

.element {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

.element:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

案例 5：CSS 3D 变换

CSS 3D 变换可以为元素添加逼真的深度感。通过应用旋转、平移和缩放，我们可以创建令人惊叹的 3D 效果。

.element {
  transform: translateZ(-50px) rotateX(45deg) rotateY(30deg);
  transition: transform 0.5s ease-in-out;
}

.element:hover {
  transform: translateZ(0) rotateX(0) rotateY(0);
}