了解纯CSS实现轮播的基本原理
网页设计要插图片跟文字交替显示？别急着用JavaScript，试试看纯CSS也能解决！下面我教你怎么简单地用纯CSS完成这个切换，给你点新思路~
逐帧动画与补间动画的结合
{
/* 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);
}
想要做出流畅的无限循环轮播？那就试试将逐帧动画和补间动画巧妙地搭配在一起先用逐帧动画搞定整体切换，再由补间动画解决数据灵活流转的问题，这样就能轻松拥有顺滑的轮播效果了！这种方法简单有效，还能广泛运用于各式各样的轮播中喔~
利用逐帧动画控制整体切换
- Lorem ipsum 1111111
- Lorem ipsum 2222222
- Lorem ipsum 3333333
- Lorem ipsum 4444444
- Lorem ipsum 5555555
- Lorem ipsum 6666666
做逐帧动画很简单，只需要给“animation-timing-function”添加上“steps(n)”，这里的n代表着步数，每个间隔几步就能变换一下元素。这样弄出来的效果就会很自然，看着就像是连贯的动态。想做效果多样的整体轮播？按照这个方法来就对了！
: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));
}
}
补间动画实现数据间的切换
说到动画，不只是逐帧动画，补间动画也是很重要滴。这个可以帮我们在不同数据之间弄得更自然顺滑地改变。比如，用补间动画把一堆数据从A搬到B，再加上逐帧动画做些细节处理，就能做出看起来超流畅的轮播效果！
末尾填充头部第一组数据
总之，搞定那些切换过后留下来的问题，关键就在于把开头和结尾都弄得妥当。像是在结尾补上跟开头相仿的那段，就能让整个画面看着流畅多了。而且这样一来，那动画也会顺眼不少，就像没经历过切换似的。
竖直方向和水平方向轮播效果
别忘了还有一招能让文字翻滚起来，而且还能上下左右来回跑。你只需调整一下CSS里边的transform属性就可以。用它来控制元素的位置变化和循环展示，视觉效果绝对劲爆！
应用于图片版轮播
- Lorem ipsum 1111111
- Lorem ipsum 2222222
- Lorem ipsum 3333333
- Lorem ipsum 4444444
- Lorem ipsum 5555555
- Lorem ipsum 6666666
:root {
--h: 36;
--speed: 1.2s;
}
ul li {
height: 36px;
animation: liMove calc(var(--speed)) infinite;
}
@keyframes liMove {
0% {
transform: translate(0, 0);
}
80%,
100% {
transform: translate(0, -36px);
}
}
讲得可不是文档啥事就是告诉你，这招儿还能用在图片轮播上嘞！只需要换换代码里的文字为图片链接，再调整下样式，就能搞定图片版的无限循环！是不是特容易？这样还能让代码看着清爽些，以后修理起来就省心多了哟~
灵活运用于各类项目需求
学会了纯CSS的文字和图片轮播，感觉就像是拿到了万能钥匙，不管是什么项目都不在话下！无论是网站的主页大头像，还是清仓产品的特卖页面，或者是新闻资讯的播放器，想要让内容缓缓滚动起来，这东西就能轻松搞定！
: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%;
animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, calc(var(--s) * var(--h) * -1px));
}
}
@keyframes liMove {
0% {
transform: translate(0, 0);
}
80%,
100% {
transform: translate(0, calc(var(--h) * -1px));
}
}
总结与展望
这篇可牛了，教你怎么用纯CSS做出漂亮的文字和图片轮播效果，再加个逐帧动画跟补间动画，画面太流畅！而且这种方法应用面超广，对网页设计来说太重要！如今前端技术越来越发达，相信未来还会有更多有趣的互动玩法等着咱们去发现！
。
评论0