CSS实现首尾相接上下滚动效果

CSS实现首尾相接上下滚动效果要实现固定内容的循环滚动效果可以使用CSS动画属性animation: scroll 10s linear infinite;其中10秒的时长可根据实际需求调整。动画属性说明animation-name: scroll指定动画名称需与keyframes规则定义的名称保持一致animation-duration: 10s设置单次动画循环的持续时间animation-timing-function: linear使动画保持匀速运动无加速或减速效果animation-iteration-count: infinite实现动画无限循环播放divclassscroll-containerdivclassscroll-content!--第一组内容--divclassscroll-item第一行第一行第一行第一行第一行第一行/divdivclassscroll-item第二行第二行第二行第二行第二行第二行/divdivclassscroll-item第三行第三行第三行第三行第三行第三行/divdivclassscroll-item第四行第四行第四行第四行第四行第四行/divdivclassscroll-item第五行第五行第五行第五行第五行第五行/div!--第二组相同内容实现无缝循环--divclassscroll-item第一行第一行第一行第一行第一行第一行/divdivclassscroll-item第二行第二行第二行第二行第二行第二行/divdivclassscroll-item第三行第三行第三行第三行第三行第三行/divdivclassscroll-item第四行第四行第四行第四行第四行第四行/divdivclassscroll-item第五行第五行第五行第五行第五行第五行/div/div/divstyle.scroll-container{width:400px;height:300px;background:white;border-radius:8px;box-shadow:04px 12pxrgba(0,0,0,0.1);overflow:hidden;position:relative;}.scroll-content{position:absolute;width:100%;animation:scroll 10s linear infinite;}.scroll-item{padding:15px 20px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:12px;}.scroll-item:last-child{border-bottom:none;}keyframes scroll{/* 向上滚动效果修改translateY/translateX可改变滚动方向 */0%{transform:translateY(0);/* 初始位置 */}100%{transform:translateY(-50%);/* 向上偏移50%实现无缝衔接 */}}/* 悬停暂停效果 */.scroll-container:hover.scroll-content{animation-play-state:paused;}/style提示当使用v-for渲染动态内容时可通过在scroll-content元素上添加行内样式:style{animationDuration: 自定义时长}来适配不同长度的内容。## css实现循环滚动功能对于固定滚动的内容可使用animation: scroll 10s linear infinite;样式其中10s可根据需要调整时长。animation-name: scroll指定动画的名称为scroll需与keyframes规则定义的名称一致。animation-duration: 10s设置动画单次循环的时长为10秒。animation-timing-function: linear动画速度曲线为线性匀速无加速或减速效果。animation-iteration-count: infinite动画无限循环播放。javascript div classscroll-container div classscroll-content !-- 第一组内容 -- div classscroll-item第一行第一行第一行第一行第一行第一行/div div classscroll-item第二行第二行第二行第二行第二行第二行/div div classscroll-item第三行第三行第三行第三行第三行第三行/div div classscroll-item第四行第四行第四行第四行第四行第四行/div div classscroll-item第五行第五行第五行第五行第五行第五行/div !-- 第二组内容与第一组相同实现无缝循环 -- div classscroll-item第一行第一行第一行第一行第一行第一行/div div classscroll-item第二行第二行第二行第二行第二行第二行/div div classscroll-item第三行第三行第三行第三行第三行第三行/div div classscroll-item第四行第四行第四行第四行第四行第四行/div div classscroll-item第五行第五行第五行第五行第五行第五行/div /div /div style .scroll-container { width: 400px; height: 300px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; } .scroll-content { position: absolute; width: 100%; animation: scroll 10s linear infinite; } .scroll-item { padding: 15px 20px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 12px; } .scroll-item:last-child { border-bottom: none; } keyframes scroll { /* 向上滚动如要改变滚动方向可修改translateY/translateX的值,可自己尝试*/ /* 动画开始状态内容位于初始位置 */ 0% { /* translateY(0) 表示内容不偏移位于容器顶部 */ transform: translateY(0); } /* 动画结束状态内容向上偏移50% */ 100% { /* translateY(-50%) 表示内容向上偏移自身高度的50% */ /* 由于内容是重复的两组偏移50%后正好显示第二组的开始实现无缝循环 */ transform: translateY(-50%); } } /* 鼠标悬停时暂停滚动 */ .scroll-container:hover .scroll-content { animation-play-state: paused; } /style注若使用v-for渲染的滚动内容长度不固定可在scroll-content元素中添加行内样式:style{animationDuration: ‘时长’}进行控制