css动画效果代码大全

在网站设计中，图片轮播是一个非常常见的元素。通过CSS动画实现图片轮播可以不需要使用JavaScript，简单易用，同时也有很好的浏览器兼容性。

首先，我们需要一个包含图片的容器。我们可以通过HTML的<div>标签来创建，然后在其中添加<img>标签。例如：

<div class="slideshow-container">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

接下来，我们需要定义CSS样式。我们首先给容器设置一些基本样式，让其相对定位，然后将图片绝对定位，并使其全部隐藏，只展示第一张图。在这个例子中，我们设定图片切换的时间为2秒，且使用了CSS3的渐变，使图片的切换更美观。如下所示：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slideshow-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.slideshow-container img:first-child {
  opacity: 1;
}

最后，我们需要使用CSS动画来完成图片的轮播。我们可以使用:hover伪类来触发图片轮播。我们需要在:hover伪类中，通过改变第一张图片的opacity，使其逐渐变成透明，然后把第二张图片显示出来。我们还需要加上一些CSS过渡效果，使整个过程平滑美观。完整代码如下：

.slideshow-container:hover img:first-child {
  opacity: 0;
  z-index: -1;
  transition: opacity 2s ease-in-out,z-index 0s 2s;
}
.slideshow-container:hover img:nth-child(2) {
  opacity: 1;
  z-index: 1;
  transition: opacity 2s ease-in-out,z-index 0s 0s;
}
.slideshow-container:hover img:last-child {
  opacity: 0;
  z-index: -1;
  transition: opacity 2s ease-in-out,z-index 0s 2s;
}

通过以上代码，我们就可以实现一个简单的CSS动画实现图片轮播。同时，我们可以通过调整CSS样式来更改图片轮播的显示效果。