如何使用CSS3实现无限循环的无缝滚动效果-创新互联

2. 数据不确定时

在上面的小节中，数据是死的，高度也是写死到了CSS3中。可是如果从接口获取到的数据个数不定呢，每条数据的长度也不确定，怎么办呢？

这里就需要根据数据来重新计算高度，并写到CSS里，可是keyframes修改起来还比较麻烦，那么我们就用覆盖的方式来重新keyframes中的数据：

// 设置keyframes属性
function addKeyFrames(y){
    var style = document.createElement('style');
    style.type = 'text/css';
    var keyFrames = '\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }\
    @keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }';
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName('head')[0].appendChild(style);
}

计算出原始数据A的高度后，执行 addKeyFrames 方法，往head中添加css属性，那么这里的rowup就会覆盖掉之前设置的，每次滚动的距离就是数据A的高度：

function init(){
    var data = '塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。羌管悠悠霜满地，人不寐，将军白发征夫泪。', //样例数据
        data_len = data.length,
        len = parseInt(Math.random()*6)+6, // 数据的长度
        html = '';
    
    for(var i=0; i'+i+'- '+data.substr(start, s)+'';
    }
    html += '';
    document.querySelector('.list .cc').innerHTML = html+html; // 复制一份数据
    var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
    addKeyFrames( '-'+height+'px' ); // 设置keyframes
    document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
}
init();

3. 横向滚动

上面讲解的都是向上滚动，那么向左，向右，向下也比较容易理解了，把transform中的值更改为对应的数值即可。

关于“如何使用CSS3实现无限循环的无缝滚动效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。