要使用 CSS 制作响应式轮播图效果，需要以下几个步骤：
HTML 结构：使用 <div> 元素作为轮播图容器，再在其中添加多个 <img> 元素作为轮播项。
CSS 样式：设置轮播图容器的宽度和高度，并将其中的 <img> 元素设置为绝对定位，以实现轮播效果。
使用 CSS3 动画效果：使用 @keyframes 关键字定义动画效果，并使用 animation 属性将动画效果应用到轮播图容器上。
添加响应式布局：使用 CSS 媒体查询，在不同设备宽度下设置不同的样式，以实现响应式布局。
以下是一个简单的 CSS 轮播图示例代码：
HTML 结构：
<div class="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>CSS 样式：
.slider {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes slide {
0% {
transform: translateX(0);
}
33% {
transform: translateX(-100%);
}
66% {
transform: translateX(-200%);
}
100% {
transform: translateX(-300%);
}
}
.slider {
animation: slide 6s infinite;
}
@media (max-width: 768px) {
.slider {
height: 200px;
}
}在这个示例中，我们定义了一个名为 .slider 的容器，其中包含三个 <img> 元素。我们设置 .slider 的宽度为 100%，高度为 400px，并使用 position: relative 和 overflow: hidden 属性来隐藏超出容器范围的轮播项。
我们将每个轮播项设置为绝对定位，并使用 top: 0 和 left: 0 属性使其覆盖在容器的左上角。我们还将每个轮播项的宽度和高度设置为 100%，以使其填满整个容器。
为了实现轮播效果，我们使用了 CSS3 动画效果。我们使用 @keyframes 关键字定义了一个名为 slide 的动画，其中我们使用 transform: translateX() 属性将轮播项沿 X 轴平移。我们将 animation 属性应用到 .slider 容器上，并将动画名称设置为 slide，持续时间设置为 6 秒，并将重复次数设置为无限循环。
最后，我们使用 CSS 媒体查询，在设备宽度小于 768px 时，将容器高度设置为 200px，以实现响应式布局。
需要注意的是，这只是一个简单的示例，实际开发中还需要考虑更多细节，比如添加导航按钮、控制轮播速度等。