CSS實(shí)現(xiàn)頁面淡入淡出效果

在CSS中，我們可以使用透明度（opacity）來實(shí)現(xiàn)頁面的淡入淡出效果，以下是一些示例代碼，可以幫助你實(shí)現(xiàn)這一功能：

1、淡入效果：

.fade-in {
  opacity: 0;
  animation: fade-in 2s ease-in-out;
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

在這個(gè)示例中，我們定義了一個(gè)名為fade-in的動(dòng)畫，它會(huì)在2秒內(nèi)將元素的透明度從0增加到1，從而實(shí)現(xiàn)淡入效果。

2、淡出效果：

.fade-out {
  opacity: 1;
  animation: fade-out 2s ease-in-out;
}
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

在這個(gè)示例中，我們定義了一個(gè)名為fade-out的動(dòng)畫，它會(huì)在2秒內(nèi)將元素的透明度從1增加到0，從而實(shí)現(xiàn)淡出效果。

你可以將以上代碼添加到你的CSS文件中，并應(yīng)用到需要實(shí)現(xiàn)淡入淡出效果的元素上，記得在元素中添加對應(yīng)的類名（如fade-in或fade-out），并根據(jù)需要調(diào)整動(dòng)畫的持續(xù)時(shí)間和其他樣式屬性。