[分享]css3响应式自动轮播图

CSS3响应式自动轮播图是一种可以根据不同设备大小和分辨率适应调整的图像轮播。通过使用CSS3的transition和animation，以及响应式设计的media queries，我们可以轻松地创建...

CSS3响应式自动轮播图是一种可以根据不同设备大小和分辨率适应调整的图像轮播。通过使用CSS3的transition和animation，以及响应式设计的media queries，我们可以轻松地创建这样一个自动轮播图。

html {
    font-size: 100%;
}
@media (min-width: 768px) {
    html {
        font-size: 125%;
    }
}

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.carousel-image.active {
    opacity: 1;
}

@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.carousel-inner.animate .carousel-image {
    animation: slide 5s linear infinite;
}

@media (min-width: 768px) {
    .carousel-image {
        opacity: 0;
        transition: opacity .5s ease-in-out;
        transform: translateX(100%);
    }
    .carousel-image.active {
        opacity: 1;
        transform: translateX(0);
    }
    .carousel-inner.animate .carousel-image {
        animation: none;
    }
} 

在这段代码中，我们首先设置基本的 HTML 和 CSS 样式。carousel 类定义了轮播的容器，carousel-inner 类定义了所有轮播图像的容器。carousel-image 这个类用于定义轮播图像的样式，并且定义了 opacity，使得每张图片的 opacity 值在过渡期间变化。active 类用于设置当前轮播图像的 opacity 值，以此激活和非激活轮播内的图片。slide keyframes 定义了轮播的动画效果。

最后，我们使用媒体查询来定义响应式样式，当设备宽度 768px 以上时，我们改变了.carousel-image 的 transform 和 opacity 属性，同时停止动画，获取更好的用户体验。