怎么利用纯CSS实现文字轮播与图片轮播
本文小编为大家详细介绍“怎么利用纯CSS实现文字轮播与图片轮播”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么利用纯CSS实现文字轮播与图片轮播”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
成都创新互联是一家集网站建设,大新企业网站建设,大新品牌网站建设,网站定制,大新网站建设报价,网络营销,网络优化,大新网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：
看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？
我们来简单分析分析，从表面上看，确实好像只有元素的 transform: translate() 在位移，但是注意，这里有两个难点：
到这里，你可以暂停思考一下，如果有 20 个元素，需要进行类似的无限轮播播报，使用 CSS 实现，你会怎么去做呢？
逐帧动画控制整体切换
首先，我需要利用到逐帧动画效果，也被称为步骤缓动函数，利用的是 animation-timing-function 中，的 steps，语法如下：
{
/* Keyword values */
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: steps(6, start)
animation-timing-function: steps(4, end);
}如果你对 steps 的语法还不是特别了解，强烈建议你先看看我的这篇文章 -- 深入浅出 CSS 动画，它对理解本文起着至关重要的作用。
好的，还是文章以开头的例子，假设我们存在这样 HTML 结构：
- Lorem ipsum 1111111
- Lorem ipsum 2222222
- Lorem ipsum 3333333
- Lorem ipsum 4444444
- Lorem ipsum 5555555
- Lorem ipsum 6666666
首先，我们实现这样一个简单的布局：
在这里，要实现轮播效果，并且是任意个数，我们可以借助 animation-timing-function: steps()：
:root {
// 轮播的个数
--s: 6;
// 单个 li 容器的高度
--h: 36;
// 单次动画的时长
--speed: 1.5s;
}
.g-container {
width: 300px;
height: calc(var(--h) * 1px);
}
ul {
display: flex;
flex-direction: column;
animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
width: 100%;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, calc(var(--s) * var(--h) * -1px));
}
}别看到上述有几个 CSS 变量就慌了，其实很好理解：
calc(var(--speed) * var(--s))：单次动画的耗时 * 轮播的个数，也就是总动画时长
steps(var(--s)) 就是逐帧动画的帧数，这里也就是 steps(6)，很好理解
calc(var(--s) * var(--h) * -1px)) 单个 li 容器的高度 * 轮播的个数，其实就是 ul 的总体高度，用于设置逐帧动画的终点值
上述的效果，实际如下：
如果给容器添加上 overflow: hidden，就是这样的效果：
这样，我们就得到了整体的结构，至少，整个效果是循环的。
但是由于只是逐帧动画，所以只能看到切换，但是每一帧之间，没有过渡动画效果。所以，接下来，我们还得引入补间动画。
利用补间动画实现两组数据间的切换
我们需要利用补间动画，实现动态的切换效果。
这一步，其实也非常简单，我们要做的，就是将一组数据，利用 transform，从状态 A 位移到 状态 B。
单独拿出一个来演示的话，大致的代码如下：
Lorem ipsum 1111111
Lorem ipsum 2222222
Lorem ipsum 3333333
Lorem ipsum 4444444
Lorem ipsum 5555555
Lorem ipsum 6666666
