基础 CSS 厨房水槽显示

如果您是一位前端开发人员或者网页设计师，您一定知道如何使用 CSS 来控制页面的样式。今天，我们将探讨如何使用 CSS 实现基础的厨房水槽显示效果。

水槽背景

我们需要先设置水槽的背景，可以使用下面的 CSS 代码：

.sink {
  background-color: #EEE;
  border: 1px solid #CCC;
  border-radius: 10px;
  width: 400px;
  height: 250px;
  overflow: hidden;
  position: relative;
}

这段代码将背景色设置为浅灰色 (#EEE)，边框颜色为浅灰色 (#CCC)，边框圆角角度为 10px，宽度为 400px，高度为 250px，overflow 属性设置为 hidden，这样可以使得水槽中的内容不会溢出。

水槽水龙头

接下来，我们需要添加水龙头到水槽中。可以使用下面的 CSS 代码：

.sink .faucet {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #CCC;
  transform: translateX(-50%);
}

这段代码将水龙头设置为绝对定位，距离顶部 20px，距离水槽左边框中点水平居中，宽度为 20px，高度为 20px，边框圆角角度为 50%，背景颜色为浅灰色 (#CCC)，并使用 transform 属性水平居中水龙头。

水槽出水口

现在，我们需要添加水槽的出水口，可以使用下面的 CSS 代码：

.sink .drain {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 40px;
  height: 10px;
  border-radius: 5px;
  background-color: #CCC;
  transform: translateX(-50%);
}

这段代码将出水口设置为绝对定位，距离底部 20px，距离水槽左边框中点水平居中，宽度为 40px，高度为 10px，边框圆角角度为 5px，背景颜色为浅灰色 (#CCC)，并使用 transform 属性水平居中出水口。

水槽水流

最后，我们需要添加水流到水槽中。可以使用下面的 CSS 代码：

.sink .water {
  position: absolute;
  bottom: 30px;
  left: -10%;
  width: 120%;
  height: 20px;
  background-color: #66F;
  animation: flow 2s alternate infinite ease-in-out;
}

@keyframes flow {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(10%);
  }
}

这段代码将水流设置为绝对定位，距离底部 30px，距离左侧超出水槽边缘 10%，宽度超过水槽 20%，高度为 20px，颜色为深蓝色 (#66F)。并使用动画效果，流动时长为 2 秒，交替动画，无限循环，缓入缓出。

到此为止，我们已经实现了基础的 CSS 厨房水槽显示效果。完整的代码如下所示：

<div class="sink">
  <div class="faucet"></div>
  <div class="water"></div>
  <div class="drain"></div>
</div>

.sink {
  background-color: #EEE;
  border: 1px solid #CCC;
  border-radius: 10px;
  width: 400px;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.sink .faucet {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #CCC;
  transform: translateX(-50%);
}

.sink .drain {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 40px;
  height: 10px;
  border-radius: 5px;
  background-color: #CCC;
  transform: translateX(-50%);
}

.sink .water {
  position: absolute;
  bottom: 30px;
  left: -10%;
  width: 120%;
  height: 20px;
  background-color: #66F;
  animation: flow 2s alternate infinite ease-in-out;
}

@keyframes flow {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(10%);
  }
}

希望本文对您有所帮助！