[分享]css动画图片加html链接

CSS动画是一种让网页看起来更生动的技术，它可以用于众多效果，如动画图片和HTML链接。下面来看一下怎样实现这样的效果。 链接文本 .animation { : relative; } .ani...

CSS动画是一种让网页看起来更生动的技术，它可以用于众多效果，如动画图片和HTML链接。下面来看一下怎样实现这样的效果。

<!-- HTML 代码 -->
<div class="animation">
  <img src="图片链接" alt="图片描述">
  <a href="链接地址">链接文本</a>
</div>

<!-- CSS 代码 -->
.animation {
  position: relative;
}
.animation img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 3s linear infinite;
}
.animation a {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  animation: float 3s ease-in-out infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -55%);
  }
} 

上面的代码中，我们首先在HTML中创建一个包含图片和链接的div元素，并给它一个类名为animation。在CSS中，我们为animation类设置一个相对定位，以便后面缩放元素时不会影响其他元素的位置。

接下来，我们为div中的img元素创建一个动画，使它以线性的方式无限旋转。动画名称为rotate，持续时间为3秒。同时，我们还为图像设置了一个绝对定位，让它相对于它的容器水平垂直居中，并使之旋转起来。

最后，在a元素中创建另一个动画，使它在3秒内循环，以先缩小、然后再放大的方式上下浮动。动画名称为float，并设置为ease-in-out加速变化。我们同样为链接设置了绝对定位，并将其垂直放置在图像下方。

通过这些CSS动画，我们可以让我们的图片和链接更加生动，吸引用户的注意力。与此同时，我们也可以用其他的效果来定制我们的动画，以使它们在不同的情况下具有不同的效果。