请用 html 和 css 实现一个元素淡入淡出的动画

示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>Fade In/Out Animation</title>
	<style type="text/css">
		#box {
			width: 200px;
			height: 200px;
			background-color: blue;
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}

		#box.show {
			opacity: 1;
		}
	</style>
</head>
<body>
	<button onclick="showBox()">Show Box</button>
	<div id="box"></div>
	<script>
		function showBox() {
			document.getElementById("box").classList.toggle("show");
		}
	</script>
</body>
</html>

解释：

使用一个 div 元素作为要实现淡入淡出的元素，设置其初始的 opacity 为 0。
使用 CSS 的 transition 属性设置元素的 opacity 属性在 1 秒内进行渐变的动画效果。
定义一个 .show 类，设置它的 opacity 为 1，用于实现元素的淡入效果。
在按钮的点击事件中，使用 JavaScript 的 classList.toggle() 方法来切换 div 元素的 .show 类，以实现元素的淡入淡出效果。