当前博客:前端内容横向滚动案例

85 次浏览【转载需注明来源】

博客作者:【快码FOF编程】

个性签名:寒窗苦读十年一朝凤舞九天

看见有同学需要,这里贴出解决方案代码:

<!文档类型 网页类型>
<网页 语言代码="中文">
    <网页头部>
        <网页信息 文档编码="UTF8" />
        <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
        <网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
        <网页标题>Document</网页标题>
    </网页头部>
    <网页主体>
        <区块 类名="横向滚动">
            <行内元素>我可以横向滚动.</行内元素>
        </区块>
        <样式>
            .横向滚动 {
                溢出: 隐藏;
                空格: 不换行;
                宽度: 100%;
            }
            .横向滚动 行内元素 {
                显示模式: 内联块元素;
                左内边距: 100%;
                动画: 横向滚动名称 20s 匀速 无限次; /* 调整动画时长和效果 */
            }
            @关键帧动画 横向滚动名称 {
                0% {
                    转换: 平移x轴(0);
                }
                100% {
                    转换: 平移x轴(-100%);
                }
            }
        </样式>
    </网页主体>
</网页>

核心代码其实就是这一段:

<区块 类名="横向滚动">
    <行内元素>我可以横向滚动.</行内元素>
</区块>
<样式>
    .横向滚动 {
        溢出: 隐藏;
        空格: 不换行;
        宽度: 100%;
    }
    .横向滚动 行内元素 {
        显示模式: 内联块元素;
        左内边距: 100%;
        动画: 横向滚动名称 20s 匀速 无限次; /* 调整动画时长和效果 */
    }
    @关键帧动画 横向滚动名称 {
        0% {
            转换: 平移x轴(0);
        }
        100% {
            转换: 平移x轴(-100%);
        }
    }
</样式>
默认排序
Generic placeholder image
Generic placeholder image
快码FOF编程 Time: 2023-11-06 22:41:04

横向滚动案例来了


前端内容横向滚动案例