```html

```

在上述代碼中，我們?yōu)?`.fade-element` 類設置了初始的 `opacity` 為 0，即元素不可見，同時定義了一個 `transition` 屬性，指定了 `opacity` 屬性在 1 秒內(nèi)以緩動（ease）的方式過渡。

二、JavaScript 代碼

接下來，在 JavaScript 文件（例如 `script.js`）中編寫實現(xiàn)淡入淡出效果的代碼：

```javascript

// 獲取要實現(xiàn)淡入淡出效果的元素

const fadeElement = document.querySelector('.fade-element');

// 定義淡入函數(shù)

function fadeIn() {

fadeElement.style.opacity = 1;

}

// 定義淡出函數(shù)

function fadeOut() {

fadeElement.style.opacity = 0;

}

// 延遲一段時間后調(diào)用淡入函數(shù)

setTimeout(fadeIn, 1000); // 1000 毫秒 = 1 秒

// 延遲一段時間后調(diào)用淡出函數(shù)

setTimeout(fadeOut, 3000); // 3000 毫秒 = 3 秒

```

在上述代碼中，首先通過 `document.querySelector` 獲取到具有 `.fade-element` 類的元素。然后，定義了 `fadeIn` 和 `fadeOut` 兩個函數(shù)，分別用于將元素的 `opacity` 設置為 1（淡入）和 0（淡出）。使用 `setTimeout` 函數(shù)來延遲一段時間后調(diào)用 `fadeIn` 函數(shù)實現(xiàn)淡入效果，再延遲一段時間后調(diào)用 `fadeOut` 函數(shù)實現(xiàn)淡出效果。

三、擴展與優(yōu)化

1. 循環(huán)淡入淡出：可以使用 `setInterval` 函數(shù)來創(chuàng)建一個循環(huán)，使元素不斷地淡入淡出。例如，以下代碼實現(xiàn)了每 2 秒循環(huán)一次淡入淡出效果：

```javascript

const fadeElement = document.querySelector('.fade-element');

function fadeInOut() {

if (fadeElement.style.opacity === '0') {

fadeElement.style.opacity = 1;

} else {

fadeElement.style.opacity = 0;

}

}

setInterval(fadeInOut, 2000); // 2000 毫秒 = 2 秒

```

2. 添加事件監(jiān)聽器：可以為元素添加鼠標移入（mouseover）和鼠標移出（mouseout）事件監(jiān)聽器，在鼠標移入時停止淡入淡出，鼠標移出時繼續(xù)淡入淡出。以下是示例代碼：

```javascript

const fadeElement = document.querySelector('.fade-element');

function fadeInOut() {

if (fadeElement.style.opacity === '0') {

fadeElement.style.opacity = 1;

} else {

fadeElement.style.opacity = 0;

}

}

fadeElement.addEventListener('mouseover', function () {

clearInterval(intervalId);

});

fadeElement.addEventListener('mouseout', function () {

intervalId = setInterval(fadeInOut, 2000);

});

let intervalId = setInterval(fadeInOut, 2000);

```

在上述代碼中，通過 `addEventListener` 為元素添加了 `mouseover` 和 `mouseout` 事件監(jiān)聽器。在 `mouseover` 事件中，使用 `clearInterval` 函數(shù)停止了定時器，在 `mouseout` 事件中，重新啟動了定時器。

通過以上步驟，我們可以在 JavaScript 中實現(xiàn)元素的淡入淡出效果?？梢愿鶕?jù)實際需求進行擴展和優(yōu)化，例如添加更多的過渡效果、控制淡入淡出的速度等。這種效果可以用于各種網(wǎng)頁交互場景，如提示框、加載動畫等，提升用戶體驗。