CSS設(shè)置上拉下滑的方法

在CSS中，我們可以使用transition屬性來設(shè)置上拉下滑的動(dòng)畫效果，以下是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<div class="container">
  <div class="box"></div>
</div>

CSS代碼：

.container {
  position: relative;
  height: 200px;
  width: 200px;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  background-color: #333;
  transition: top 2s ease-in-out;
}
.container:hover .box {
  top: -100px;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)容器div，并在其中放置了一個(gè)box div，通過CSS，我們?cè)O(shè)置了容器的位置和大小，以及box的位置和大小，我們還使用transition屬性來設(shè)置box上拉下滑的動(dòng)畫效果，在容器上懸停時(shí)，box會(huì)向下移動(dòng)100像素，同時(shí)動(dòng)畫效果會(huì)在2秒內(nèi)平滑過渡，您可以根據(jù)需要調(diào)整這些值。