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%);
            }
        }

 

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片