文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS3如何实现无限循环的滚动效果

2023-07-04 23:17

关注

这篇文章主要讲解了“CSS3如何实现无限循环的滚动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3如何实现无限循环的滚动效果”吧!

1. 使用CSS3来实现

若要用CSS3的属性实现的话,非animation莫属,因为transition是需要手动的触发,而且不能无限次执行下去,而animation恰好能解决这个问题。

假如数据是在写死的情况下时,我们完全可以手动复制一份数据放在后面,然后把原数据的高度写到css中,实现的思路与上面的一样:

css:

@keyframes rowup {    0% {        -webkit-transform: translate3d(0, 0, 0);        transform: translate3d(0, 0, 0);    }    100% {        -webkit-transform: translate3d(0, -307px, 0);        transform: translate3d(0, -307px, 0);    }}.list{    width: 300px;    border: 1px solid #999;    margin: 20px auto;    position: relative;    height: 200px;    overflow: hidden;}.list .rowup{    -webkit-animation: 10s rowup linear infinite normal;    animation: 10s rowup linear infinite normal;    position: relative;}

html:

<div class="list">    <div class="cc rowup">        <div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div>        <div class="item">2- 3123233</div>        <div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div>        <div class="item">4- ggrgerg</div>        <div class="item">5- fvdgdv</div>        <div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者:她死了法官要负责!</div>        <div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div>  <div class="item">8- 德国网红致信默克尔</div>     <div class="item">9- 国资委原</div>        <div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div>        <div class="item">2- 3123233</div>        <div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div>        <div class="item">4- ggrgerg</div>        <div class="item">5- fvdgdv</div>        <div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者:她死了法官要负责!</div>        <div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div>        <div class="item">8- 德国网红致信默克尔</div>     <div class="item">9- 国资委原</div>    </div></div>

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 = '<div class="ss">';        for(var i=0; i<len; i++){        var start = parseInt( Math.random()*(data_len-20) ),            s = parseInt( Math.random()*data_len );        html += '<div class="item"v>'+i+'- '+data.substr(start, s)+'</div>';    }    html += '</div>';    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中的值更改为对应的数值即可。

css的全称是什么

css的全称是Cascading Style Sheets(层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

感谢各位的阅读,以上就是“CSS3如何实现无限循环的滚动效果”的内容了,经过本文的学习后,相信大家对CSS3如何实现无限循环的滚动效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯