vue 文字横向滚动组件（纯css）

哇哈2023

已于 2023-08-25 11:25:17 修改

阅读量804

点赞数 1

文章标签： vue.js javascript vue

于 2023-05-23 18:45:00 首次发布

本文链接：https://blog.csdn.net/qq_52065282/article/details/130822238

版权

<!-- 跑马灯组件 marquee -->
<template>
    <div class="marquee">
        <p class="marquee-text">
            <span class="tips-ma">系统通知：</span>
            <span class="txt alert-msg ">
                积极的聚集地哦是的那是多久哦阿斯顿哈哈哈哈哈哈
            </span>
        </p>
    </div>
</template>
 
<script setup>

</script>
 
<style lang="scss" scoped>
.marquee {
    overflow: hidden;
    color: red;

    /* border: 1px solid #333; */
    .tips-ma {
        display: flex;
        align-items: center;
    }

    .marquee-text {
        /* width: max-content; */
        white-space: nowrap;
        animation: scroll 15s linear infinite;
        /* font-size: 24px; */
        /* padding-right: 200px; */
        display: flex;
        align-items: center;

        &:hover {
            //鼠标悬停 停止横向滚动
           animation-play-state: paused;
        }
    }

    .emphasize-days {
        font-weight: bold;
    }
}


@keyframes scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}
</style>