在 10 秒内淡入卡片 HTML CSS

在现代网站设计中，动画效果往往能够使网站更加生动有趣。本文将介绍如何使用 HTML 和 CSS 在 10 秒内实现淡入卡片效果。

HTML 结构

卡片使用一个 DIV 作为容器，内部有一个标题标签和一个内容标签。HTML 结构简单明了，如下所示：

<div class="card">
  <h2>标题</h2>
  <p>内容</p>
</div>

CSS 样式

下面添加 CSS 样式来使卡片淡入。首先，需要设置卡片容器的透明度为 0，让其完全不可见。然后，使用关键帧 (keyframes) 和 transition 来控制卡片在 10 秒内从不可见到淡入可见状态。

.card {
  opacity: 0;
  transition: opacity 10s;
}

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

.card.fade-in {
  opacity: 1;
  animation: fadeIn 10s;
}

以上 CSS 样式中，“opacity: 0” 将卡片的透明度设置为 0，即完全不透明。接下来，“transition: opacity 10s” 将控制卡片从透明到不透明的过渡时间设置为 10 秒钟。

“@keyframes fadeIn” 声明了一个关键帧，用于控制卡片在淡入时的透明度变化。其中，“from” 表示关键帧的起点，即透明度为 0；“to” 表示关键帧的终点，即透明度为 1。

最后，“.card.fade-in” 表示了卡片在触发动画时的样式。此处，“opacity: 1” 将卡片透明度设置为 1，即完全不透明；“animation: fadeIn 10s” 将卡片使用之前声明的关键帧，并将动画持续时间设置为 10 秒钟。

JS 动态添加样式

CSS 样式定义好之后，使用 JavaScript 动态添加样式，即可触发卡片的淡入效果。

const card = document.querySelector('.card')
card.classList.add('fade-in')

以上 JavaScript 代码中，“document.querySelector('.card')” 通过选择器获取了页面中的卡片元素，接下来，“card.classList.add('fade-in')” 给卡片添加 “fade-in” 样式，触发动画效果。

结论

在本文中，我们学习了如何使用 HTML 和 CSS 在 10 秒内实现淡入卡片效果。这是一个简单而有效的动画效果，为网站增添了动态的元素。