banner css动画

Banner是网站上的重要元素之一，通过动态效果可以吸引用户注意力。使用CSS动画来制作Banner可以带来更好的用户体验。

.banner {
  position: relative;
  overflow: hidden;
}

.banner img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: banner-fade-in 1s ease-in-out forwards;
}

@keyframes banner-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

上面的代码是一个简单的Banner动画效果，我们通过给Banner容器设置relative属性来让其中的图片相对位置确定，并将超出容器范围的内容隐藏。然后设置图片的绝对位置，并将不可见的opacity属性设置为0，接着使用CSS动画的keyframes来定义fadeIn效果的动画具体实现，并将动画应用到图片上。

可以通过调整动画属性来实现不同的Banner动画效果，比如让图片从左到右滑动，或者使用旋转效果等等。而且可以通过JS来控制Banner的轮播时间和顺序。

总之，CSS动画是一个非常有用的技术，通过它可以创建独特的网页设计效果，吸引用户的注意力。Banner是网站中的重要元素之一，使用CSS动画来制作它可以提高用户体验，增强品牌形象，让网站更具吸引力。