CSS实现文本和图片无限滚动动画

这篇具有很好参考价值的文章主要介绍了CSS实现文本和图片无限滚动动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Demo图如下:
CSS实现文本和图片无限滚动动画,css,前端文章来源地址https://www.toymoban.com/news/detail-820565.html

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            min-height: 100vh;
            background-color: rgb(11, 11, 11);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }


        .scroll {
            display: flex;
            width: 700px;
            overflow: hidden;
            mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
        }

        .scroll>div span {
            display: inline-block;
            margin: 10px;
            padding: 5px 10px;
            background-color: #333;
            border-radius: 5px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            /* 重置字体大小 */
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.5s;
        }

        .scroll>div span:hover {
            background-color: #f152ec;
        }

        .img-box .img {
            max-width: 150px;
            cursor: pointer;
            transition: filter 0.5s;
            margin: 10px;
        }

        .img-box .img:hover {
            filter: grayscale(1);
        }
        .scroll>div {
            /* 解决空白间隙将字体设置为0 */
            font-size: 0;
            white-space: nowrap;
            animation: animate var(--time) linear infinite;
            animation-delay: calc(var(--time) * -1);
        }
		/*向右移动*/
        @keyframes animate {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }
        /*向左移动*/
		 /* @keyframes animate {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
        } */

        .scroll>div:nth-child(2) {
            animation: animate2 var(--time) linear infinite;
            animation-delay: calc(var(--time) / -2);
        }
		 /*向右移动*/
        @keyframes animate2 {
            0% {
                transform: translateX(-200%);
            }

            100% {
                transform: translateX(0);
            }
        }
         /*向左移动*/
		/* @keyframes animate2 {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-200%);
            }
        } */
        .scroll:hover>div {
            animation-play-state: paused;
        }
    </style>
<div class="scroll" style="--time: 20s">
        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Vue</span>
            <span>React</span>
            <span>Figma</span>
            <span>Photoshop</span>
        </div>

        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Vue</span>
            <span>React</span>
            <span>Figma</span>
            <span>Photoshop</span>
        </div>
    </div>

    <div class="scroll" style="--time: 30s">
        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Vue</span>
            <span>React</span>
            <span>Figma</span>
            <span>Photoshop</span>
        </div>

        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Vue</span>
            <span>React</span>
            <span>Figma</span>
            <span>Photoshop</span>
        </div>
    </div>

    <div class="scroll" style="--time: 10s">
        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Vue</span>
            <span>React</span>
            <span>Figma</span>
            <span>Photoshop</span>
        </div>

        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Vue</span>
            <span>React</span>
            <span>Figma</span>
            <span>Photoshop</span>
        </div>
    </div>

    <div class="scroll" style="--time: 35s">
        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Vue</span>
            <span>React</span>
            <span>Figma</span>
            <span>Photoshop</span>
        </div>

        <div>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Vue</span>
            <span>React</span>
            <span>Figma</span>
            <span>Photoshop</span>
        </div>
    </div>
    <div class="scroll img-box" style="--time:25s">
        <div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
        </div>
        <div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div>
        </div>
    </div>
    </div>

到了这里,关于CSS实现文本和图片无限滚动动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端多张图片无缝无限循环滚动

    想必大家都注意到marquee的不循环滚动。下面说一下循环滚动相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交

    2024年01月15日
    浏览(53)
  • CSS 滚动驱动动画 scroll()

    animation-timeline 通过 scroll() 指定可滚动元素与滚动轴来为容器动画提供一个匿名的 scroll progress timeline . 通过元素在顶部和底部(或左边和右边)的滚动推进 scroll progress timeline . 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为 0% , 滚动结束被转化为 100% 如果 scroll() 指定

    2024年02月10日
    浏览(40)
  • 记录--CSS 滚动驱动动画 scroll()

    animation-timeline 通过 scroll() 指定可滚动元素与滚动轴来为容器动画提供一个匿名的 scroll progress timeline . 通过元素在顶部和底部(或左边和右边)的滚动推进 scroll progress timeline . 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为 0% , 滚动结束被转化为 100% 如果 scroll() 指定

    2024年02月10日
    浏览(46)
  • 前端:纯css实现图片轮播(自动+手动)

    目录 1.图片自动轮播 2.图片手动轮播 3.补充内容 创建2个盒子,一个盒子进行轮播图展示,一个盒子用来承载图片 CSS重置reset.css normalize.css,在写页面时,由于HTML标签自带一些CSS属性,导致在调试样式的时候会出现各种奇怪的问题,为了大概率避免这些问题,在写CSS之前可以

    2024年02月04日
    浏览(52)
  • 40.CSS输入字段文本和渐变边框动画效果

    index.html css

    2024年02月07日
    浏览(49)
  • CSS 圆形分割按钮动画 带背景、图片

     

    2024年02月01日
    浏览(44)
  • 前端使用scale属性结合CSS动态样式实现动态的图片缩放效果

    废话不多说,直接上代码: 示例一,使用css动态样式结合scale进行src图片的缩放。 示例二,使用css动态样式结合scale进行background背景图图片的缩放。

    2024年01月15日
    浏览(60)
  • 探索前端动画之CSS魔法

    在现代网页设计中,动画已经成为了吸引用户注意力、提升用户体验的重要手段之一。而在前端开发中,CSS动画是一种常见且强大的实现方式。本篇博客将带你深入探索前端动画中的CSS魔法,通过清晰的思路和完整的示例代码,帮助你掌握如何创建令人惊艳的前端动画效果。

    2024年02月13日
    浏览(43)
  • 前端小技巧:学会通过CSS Hover和JS实现图片放大镜效果

    数据来源: ChatGPT 今天,我们来看一个鼠标悬停出现图片放大镜效果,这是一个比较实用且炫酷的纯CSS和JS实现的页面效果。 HTML HTML代码非常简单,我们只需要一个div容器,内部嵌入一张图片,再添加一个用来显示放大镜的div元素。 CSS CSS代码是实现放大镜效果的重要部分,

    2024年02月02日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包