CSS使卡片淡入，然后在页面加载时淡出

的效果可以通过CSS的动画和过渡属性来实现。

首先，我们可以使用CSS的动画属性来定义卡片的淡入效果。可以使用@keyframes规则来创建一个动画序列，然后将其应用到卡片元素上。以下是一个示例代码：

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card {
  animation: fadeIn 1s ease-in;
}

上述代码中，我们定义了一个名为fadeIn的动画序列，从透明度0开始，逐渐增加到透明度1。然后，我们将该动画应用到卡片元素上，使用animation属性指定动画名称、持续时间和动画速度。

接下来，我们可以使用CSS的过渡属性来实现卡片在页面加载时的淡出效果。可以使用transition属性来定义过渡效果，并将其应用到卡片元素上。以下是一个示例代码：

.card {
  transition: opacity 1s ease-out;
}

body.loaded .card {
  opacity: 0;
}

上述代码中，我们使用transition属性将透明度属性(opacity)的变化设置为1秒的过渡效果，并应用到卡片元素上。然后，我们使用body.loaded选择器来指定在页面加载完成后，将卡片元素的透明度设置为0，实现淡出效果。

为了在页面加载时触发淡出效果，我们还需要使用JavaScript来添加一个类名到body元素上。以下是一个示例代码：

window.addEventListener('load', function() {
  document.body.classList.add('loaded');
});

上述代码中，我们使用addEventListener方法监听页面加载完成事件，然后在事件回调函数中，使用classList.add方法将loaded类名添加到body元素上。

综上所述，通过以上的CSS和JavaScript代码，可以实现卡片的淡入和淡出效果。请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整和扩展。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS：https://cloud.tencent.com/product/css