[分享]css3广告图随机飘动

在网页设计中，广告图是不可或缺的一部分，为了吸引用户的眼球，我们经常采用各种方式来制作广告图。今天我们来介绍一种使用 CSS3 制作的广告图随机飘动的方法。.ad { : absolute; anim...

在网页设计中，广告图是不可或缺的一部分，为了吸引用户的眼球，我们经常采用各种方式来制作广告图。今天我们来介绍一种使用 CSS3 制作的广告图随机飘动的方法。

.ad {
  position: absolute;
  animation: float 4s linear infinite;
}

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

首先我们需要给广告图添加一个 class，然后设置 position 为 absolute，使其脱离文档流，方便后续的动画处理。接着我们使用 CSS3 的 animation 属性来定义动画，动画的名称为 float，持续时间为 4 秒，变化方式为线性，无限循环。

在接下来的代码块中，我们定义了 float 动画的关键帧，其中 0% 代表动画的开始状态，100% 代表动画的结束状态，50% 则代表动画的中间状态，使用 transform 属性来实现广告图的随机运动。

我们可以根据实际需求来调整 transform 的值，以实现不同的运动效果。在此例中，我们使用 translate 函数来实现广告图的平移。

最后，我们只需要将制作好的广告图添加到网页中，并给它添加上 .ad 类名，就可以看到广告图随机飘动的效果了。