CSS頁(yè)面加動(dòng)畫效果怎么做？

在CSS中，我們可以使用各種屬性來(lái)添加動(dòng)畫效果，以下是一些常用的方法：

1、使用transition屬性

transition屬性可以用來(lái)制作元素的過(guò)渡效果，比如顏色的變化、大小的縮放等，我們可以給元素添加一個(gè)簡(jiǎn)單的顏色過(guò)渡效果：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 2s;
}
div:hover {
  background-color: blue;
}

在這個(gè)例子中，當(dāng)鼠標(biāo)懸停在div上時(shí)，背景顏色會(huì)在2秒內(nèi)從紅色過(guò)渡到藍(lán)色。

2、使用animation屬性

animation屬性可以用來(lái)制作更復(fù)雜的動(dòng)畫效果，比如幀動(dòng)畫、路徑動(dòng)畫等，我們可以給元素添加一個(gè)旋轉(zhuǎn)的動(dòng)畫效果：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在這個(gè)例子中，div會(huì)不斷地旋轉(zhuǎn)，每次旋轉(zhuǎn)2秒，然后重新開始。

3、使用transform屬性

transform屬性可以用來(lái)對(duì)元素進(jìn)行各種變換，比如縮放、旋轉(zhuǎn)、傾斜等，我們可以給元素添加一個(gè)縮放的動(dòng)畫效果：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(1);
  transition: transform 2s;
}
div:hover {
  transform: scale(2);
}

在這個(gè)例子中，當(dāng)鼠標(biāo)懸停在div上時(shí)，元素會(huì)在2秒內(nèi)放大到原來(lái)的2倍大小。