css文字超出滚动效果

css文字不超出不滚动,超出盒子后显示走马灯效果

<div class="marquee">
          <div class="marquee-wrap">
            <div class="marquee-content ">
              这个是非超长数据
            </div>
          </div>
        </div>
        <div class="marquee">
          <div class="marquee-wrap">
            <div class="marquee-content ">
              这个是超长数据,我超长了哦,我超长了哦,我超长了哦
            </div>
          </div>
        </div>
.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%);
            }
        }

 

你已经把内容看完了
© 版权声明
1:本网站名称:源码库
2:本站永久网址:www.ymkuz.com
3:本站部分内容收集于互联网,如果有侵权内容、请联系我们删除,不妥之处,敬请谅解
4:本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责
5:本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6:本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新
7.文章投稿-投诉建议E-mail:yunduanw@qq.com 站长QQ:99767152 官方QQ群:源码库交流群
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容