css 图片上 加动态字

CSS 是一门用于网页设计的样式表语言，它可以帮助我们实现一些炫酷的效果。其中，我们可以通过 CSS 的技巧在图片上添加动态字体，让网页看起来更加生动。

<code>
<div class="image-with-text">
  <img src="xxxxxx" alt="图片">
  <div class="text">
    <p>这是动态字体</p>
  </div>
</div>

<style>
.image-with-text {
  position: relative;
  width: 500px;
}

.text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: rgba(0,0.5);
  color: white;
  opacity: 0;
  transition: opacity 0.5s;
}

.image-with-text:hover .text {
  opacity: 1;
}

.text p {
  font-size: 24px;
  animation: move 1s linear infinite;
}

@keyframes move {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>
</code>

上面的代码中，我们创建了一个包含图片和动态字体的容器。通过设置容器的 position 属性为 relative，图片和动态字体会作为该容器的子元素。我们使用了 position 值为 absolute 来定位动态字体在容器的最底端，并通过设置 bottom、left 和 right 三个值让它居中显示。此外，我们还添加了背景色和不透明度等样式使得动态字体更加醒目。

我们同时为容器中的动态字体添加了一些动画效果。当鼠标悬停在图片上时，字体的 opacity 属性会被设置为 1，从而显示在图片上。并且我们还为字体添加了一个上下移动的运动轨迹，通过设置 animation 属性来实现。

通过使用 CSS 的技巧，我们可以在网页图片上添加生动的动态字体，让网页看起来更加丰富多彩，为用户提供更好的交互体验。