css3制作鼠标悬浮图文动画效果

作者：System 时间：2024年08月21日分类：所有,css3 字数：1190

这篇文章距离上次修改已过225天，其中的内容可能已经有所变动。

在CSS3中，可以使用transition属性和:hover伪类来制作鼠标悬浮图文动画效果。以下是一个简单的例子，展示了如何实现这种效果：

HTML:

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="示例图片">
  </div>
  <div class="text">
    <h3>图片标题</h3>
    <p>图片描述文字</p>
  </div>
</div>

CSS:

.container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  transition: transform 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(100%);
}

.container:hover .image {
  transform: translateY(-100%);
}

.container:hover .text {
  transform: translateY(0);
}

在这个例子中，.container 是包含图片和文本的容器。.image 是包含图片的div，.text 是包含文本的div。当鼠标悬浮在 .container 上时，.image 的 transform 属性从 translateY(0) 变为 translateY(-100%)，.text 的 transform 属性从 translateY(100%) 变为 translateY(0)，从而实现了图片和文本同时向上移动的动画效果。

css3制作鼠标悬浮图文动画效果

评论已关闭

推荐阅读