在CSS中，我們可以使用transition屬性來(lái)添加鼠標(biāo)滑動(dòng)效果。transition屬性可以定義元素從一種樣式狀態(tài)變化到另一種樣式狀態(tài)時(shí)的過(guò)渡效果。

我們需要為元素定義一個(gè)初始樣式狀態(tài)，

.my-element {
  width: 100px;
  height: 100px;
  background-color: red;
}

我們可以定義一個(gè)鼠標(biāo)滑過(guò)時(shí)的樣式狀態(tài)，

.my-element:hover {
  width: 150px;
  height: 150px;
  background-color: blue;
}

在這個(gè)例子中，當(dāng)鼠標(biāo)滑過(guò)元素時(shí)，元素的寬度和高度會(huì)變大，背景顏色也會(huì)變成藍(lán)色。

我們可以使用transition屬性來(lái)定義過(guò)渡效果，

.my-element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
.my-element:hover {
  width: 150px;
  height: 150px;
  background-color: blue;
}

在這個(gè)例子中，元素的寬度、高度和背景顏色會(huì)在2秒內(nèi)平滑過(guò)渡到鼠標(biāo)滑過(guò)時(shí)的樣式狀態(tài)。

除了使用transition屬性外，我們還可以使用@keyframes規(guī)則來(lái)定義更復(fù)雜的過(guò)渡效果，

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0%); }
}
.my-element {
  position: relative;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide-up 2s;
}

在這個(gè)例子中，元素會(huì)在2秒內(nèi)向上滑動(dòng)到原始位置，我們可以根據(jù)需要在@keyframes規(guī)則中定義更多的關(guān)鍵幀來(lái)創(chuàng)建更豐富的過(guò)渡效果。