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

admin   2024-09-29   网站源码    104

<!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>来自小黑鸟资源网。</p>  
    </div>  
</body>  
</html>
0
验证码

评论

    没有评论