使用css animation对两段文字添加上下无效滚动效果

怕冷的火焰（~杰）

已于 2024-03-14 20:51:52 修改

阅读量201

点赞数 4

分类专栏：前端 css 文章标签： css 前端 javascript

于 2024-03-14 14:18:26 首次发布

本文链接：https://blog.csdn.net/weixin_50236973/article/details/136709221

版权

前端同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

<div className={style.invite}>
    <img src={inviteIcon} />
    <div className={style.invite_content_box}>
        <div className={`${style.invite_content_box_list}`}>
            <div className={`${style.item} ${style.item_1}`} onClick={handleJumpInvite}>
                邀请好友注册，享 <span>50</span> 条消息数
            </div>
            <div className={`${style.item} ${style.item_2}`}>新注册用户，免费体验三天</div>
            <div className={`${style.item} ${style.item_3}`} onClick={handleJumpInvite}>
                邀请好友注册，享 <span>50</span> 条消息数
            </div>
        </div>
    </div>
</div>



.invite {
    background: rgba(236, 7, 135, 0.30);
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    margin-top: 12px;
    border-radius: 16px;

    > img {
        margin-right: 4px;
        margin-left: 8px;
    }

    .invite_content_box {
        margin-top: 48px;
        width: 208px;

        .invite_content_box_list {
            height: 72px;
            position: relative;
            animation: moreContentScroll 6s ease-out infinite;
            animation-delay: 2s;

            .item {
                position: absolute;
                width: 100%;
                height: 24px;
                line-height: 24px;

                color: #FFF;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
            }

            .item_1 {
                top: 0;
            }

            .item_2 {
                top: 24px;
            }

            .item_3 {
                top: 48px;
            }
        }
    }
}


@keyframes moreContentScroll{
    0% {
        transform: translateY(0);
    }
    5% {
        transform: translateY(-24px);
    }
    50% {
        transform: translateY(-24px);
    }
    55% {
        transform: translateY(-48px);
    }
    100% {
        transform: translateY(-48px);
    }
}

参考如下网址

c摄图网-正版高清图片免费下载_商用设计素材图库