返回

滑动物体后的文字——CSS Animations 属性的独特应用

前端

在网页设计中，文字动画无疑是一种颇具吸引力的设计元素，它可以有效地增强用户体验，提升网页的趣味性和互动性。CSS Animations 属性正是实现这种效果的利器。在这篇文章中，我将带大家深入了解 CSS Animation Property 的奥秘，并详细剖析如何运用该属性实现“滑动图片展现文字”这一有趣效果。

为了充分理解这一效果的实现原理，我们先来了解一下 CSS Animations 属性的基本语法：

@keyframes animation-name {
  0% {
    /* 动画开始时的样式 */
  }

  50% {
    /* 动画进行到一半时的样式 */
  }

  100% {
    /* 动画结束时的样式 */
  }
}

element {
  animation-name: animation-name;
  animation-duration: animation-duration;
  animation-timing-function: animation-timing-function;
  animation-delay: animation-delay;
  animation-iteration-count: animation-iteration-count;
}

  1. @keyframes：它可以看作是整个动画的灵魂，定义了动画的关键帧。

  2. animation-name：这是一个必填属性，用于指定动画的名称。

  3. animation-duration：用于设定动画持续时间。

  4. animation-timing-function：它控制动画的速度变化曲线。

  5. animation-delay：用来指定动画的延迟时间。

  6. animation-iteration-count：这个属性用来指定动画执行的次数。

如今，在网站设计中，尤其是在需要展示一定数量文本内容的情况下，如何让用户以简便高效的方式获取信息，成为设计师面临的重要挑战。

例如，在移动设备上，有时需要在一个小屏幕上显示大量文本信息。在这种情况下，简单的滑动动画可能会非常有用，因为它可以分批显示信息，既节省了空间又吸引了用户的注意力。

让我们再来看一个CSS实现的动态滑块图，当你将鼠标悬停在图片上时，图片和图片中的内容会被一个不透明的黑色背景遮挡，同时下面的文本逐渐显示。

<div class="container">
  <div class="image-container">
    <img src="image.jpg" alt="Image">
  </div>
  <div class="text-container">
    <h1>Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lacus id libero tincidunt laoreet. Suspendisse potenti. Nunc euismod, massa eget ullamcorper aliquam, leo purus tempor nisl, eget aliquam tortor arcu eget leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sit amet odio velit. Integer vitae diam sit amet quam facilisis ultricies. Cras ultricies justo ut nisi feugiat, eget aliquet erat tincidunt. Sed a risus dapibus, ultrices nulla vel, laoreet sapien. Morbi pulvinar, augue eget laoreet aliquam, neque tellus dapibus diam, eget tincidunt mauris neque vel lacus. Quisque ornare vitae tortor sed ultrices.</p>
  </div>
</div>

.container {
  position: relative;
}

.image-container {
  overflow: hidden;
}

.image-container img {
  transition: opacity 0.5s ease-in-out;
}

.text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.container:hover .image-container img {
  opacity: 0.5;
}

.container:hover .text-container {
  opacity: 1;
}

  1. .container：该类包含滑块的整个结构。

  2. .image-container：此类包含滑块的图片。

  3. .image-container img：这是一个应用了过渡效果的图片。

  4. .text-container：此类包含滑块的文本内容。

  5. .container:hover .image-container img：当鼠标悬停在滑块上时，该选择器将应用 opacity: 0.5;，使图片半透明。

  6. .container:hover .text-container：当鼠标悬停在滑块上时，此选择器将应用 opacity: 1;，使文本完全可见。

CSS Animation Property 使得实现这一动效效果变得更加容易和直观。