纯css实现文字超出自动滚动

html 复制代码
  <ul class="list">
      <li class="item marquee">
        <div class="marquee-wrap">
          <div class="marquee-content ">
            这个是非超长数据
          </div>
        </div>
      </li>
      <li class="item marquee">
        <div class="marquee-wrap">
          <div class="marquee-content ">
            这个是超长数据,我超长了哦,我超长了哦,我超长了哦
          </div>
        </div>
      </li>
    </ul>
css 复制代码
.marquee {
  overflow: hidden;
}

.marquee .marquee-wrap {
  width: 100%;
  animation: marquee-wrap 4s infinite linear;
}

.marquee .marquee-content {
  float: left;
  white-space: nowrap;
  min-width: 100%;
  animation: marquee-content 4s infinite linear;
}

@keyframes marquee-wrap {
  0%,
  30% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes marquee-content {
  0%,
  30% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(-100%);
  }
}

其实就是里外容器对向滚动,滚动的值为里外容器宽度的差值,如果里容器与外容器等宽,那么差值就为0,视觉上是没有滚动的,就像第一条数据;如果里容器宽度比外容器宽,里容器向左滚动的距离比外容器向右滚动的距离大,就会形成滚动效果,并在里容器translateX为-100%外容器translate为100%时停下,视觉效果就是滚动到文字的最右侧。

PS:里容器的float: left;是为了形成块级格式化上下文,避免文字撑不开容器

相关推荐
德育处主任5 分钟前
p5.js 入门:用 point () 绘制点的超简单教程
前端·javascript·canvas
yume_sibai23 分钟前
Vue 插槽
前端·javascript·vue.js
O败者食尘D44 分钟前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome
橘颂TA1 小时前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11
GISer_Jing3 小时前
50道JavaScript基础面试题:从基础到进阶
开发语言·javascript·ecmascript
爷_8 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee4410 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro10 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin11 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说11 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制