css3实现无缝滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>css3无缝滚动</title>
</head>
<style id="test">
.scroll-container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    margin: 50px auto;
    position: relative;
}

.scroll-content {
    position: absolute;
    top: 0;
    left: 0;
    animation: scroll 10s linear infinite;
}

.scroll-content p {
    margin: 0;
    padding: 10px 0;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}


</style>

<body>


    <div class="scroll-container">
        <div class="scroll-content">
            <p>这是第一行字幕</p>
            <p>这是第二行字幕</p>
            <p>这是第三行字幕</p>
            <p>这是第四行字幕</p>
            <p>这是第一行字幕</p>
            <p>这是第二行字幕</p>
            <p>这是第三行字幕</p>
            <p>这是第四行字幕</p>
        </div>
    </div>
 


</body>
</html>
  1. HTML 结构
    • 创建一个scroll-container容器,用于限制字幕滚动的区域。
    • scroll-container内部,有一个scroll-content容器,它包含了所有需要滚动的字幕<p>元素。为了实现无缝滚动,将字幕内容重复一次。
  2. CSS 样式
    • scroll-container设置了固定的宽度和高度,并使用overflow: hidden来隐藏超出容器范围的内容。margin: 50px auto使容器在页面中水平居中且有一定的上边距。
    • scroll-content使用绝对定位,初始位置在容器的顶部。通过animation属性应用名为scroll的动画,持续时间为 10 秒,线性运动且无限循环。
    • 每个<p>元素设置了一定的内边距,用于调整字幕之间的垂直间距。
  3. 动画关键帧
    • @keyframes scroll定义了动画的关键帧。在 0% 处,字幕内容的初始位置为translateY(0),即没有垂直偏移。
    • 在 100% 处,字幕内容向上偏移了自身高度的 50%(因为字幕内容重复了一次,所以偏移 50% 刚好实现无缝衔接),即translateY(-50%),从而实现了自下往上的连续无缝滚动效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北方的刀郎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值