使用CSS animation和transform可实现无JavaScript的轮播图：首先构建包含多张图片的容器，设置绝对定位与溢出隐藏；通过@keyframes定义每张图的位移动画，利用animation-delay控制播放时机，使图片按序滑动切换，配合transition优化过渡效果，最终实现自动轮播。
制作一个简单的轮播图，使用 CSS 的 animation 和 transform 是一种轻量且高效的方式，无需 JavaScript。以下是具体实现步骤：
创建一个容器来包裹所有轮播图片，每张图放在独立的元素中，通常使用 div 或直接用 img。
<div class="carousel"> @@##@@ @@##@@ @@##@@ </div>
让轮播容器横向排列图片，并隐藏溢出部分，形成滑动视觉效果。
.carousel {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
<p>.slide {
width: 600px;
height: 400px;
position: absolute;
animation: slideAnimation 6s infinite;
}</p>注意：每张图初始位置重叠，通过 animation-delay 控制出场顺序。
立即学习“前端免费学习笔记（深入）”；
使用 transform 移动图片位置，实现平滑切换。
@keyframes slideAnimation {
0%, 33.3% { transform: translateX(0); } /* 第一张 */
33.3%, 66.6% { transform: translateX(-100%); } /* 第二张 */
66.6%, 100% { transform: translateX(-200%); } /* 第三张 */
}
说明：
translateX(-100%) 表示向左移动一整张图宽度，展示下一张。让三张图依次启动动画，形成轮播效果。
.slide:nth-child(1) {
animation-delay: 0s;
}
<p>.slide:nth-child(2) {
animation-delay: 2s;
}</p><p>.slide:nth-child(3) {
animation-delay: 4s;
}</p>这样每张图在正确的时间点开始滑入，循环播放。
添加平滑过渡效果，避免生硬切换。
.slide {
transition: transform 0.5s ease;
}
或调整动画缓动函数：
animation: slideAnimation 6s ease-in-out infinite;
基本上就这些。用纯 CSS 的 animation 和 transform 实现轮播图，关键是控制好时间点和位移距离，结构清晰就能顺利运行。
以上就是css制作简单轮播图步骤是什么_用animation和transform实现轮播的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
663
收藏
