CSS样式实现文本从右往左滚动效果

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>滚动文字效果</title>  
    <style>  
        .scrolling-text {  
            white-space: nowrap;  
            overflow: hidden;  
            box-sizing: border-box;  
        }  
  
        .scrolling-text p {  
            display: inline-block;  
            padding-left: 100%;  
            animation: scrollText 10s linear infinite;  
            font-weight: bold; /* 加粗字体 */  
            color: #d2c55d; /* 设置字体颜色 */  
        }  
  
        @keyframes scrollText {  
            0% { transform: translateX(0); }  
            100% { transform: translateX(-100%); }  
        }  
    </style>  
</head>  
<body>  
    <div class="scrolling-text">  
        <p>门票限时活动,下周一开始每天涨价,直至涨到原价2888元。</p>  
    </div>  
</body>  
</html>
尊重版权丨本站注明原创的插件,购买者不得随意分享传播,仅限个人使用,一旦发现拉黑用户,删除使用权限。大神建站-WordPress插件开发 » CSS样式实现文本从右往左滚动效果

相关文章

评论 (0)