如何用简单的HTML代码实现滚屏播放的网页效果

最新推荐文章于 2024-05-13 01:06:39 发布

芹菜还是菜

最新推荐文章于 2024-05-13 01:06:39 发布

阅读量5.1k

点赞数 4

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

本文链接：https://blog.csdn.net/hmcxy123/article/details/126533191

版权

本文介绍的主要是仅仅利用html和css语言就实现走马灯一样滚屏播放效果，主要运用了动画animation的知识点。

摘要由CSDN通过智能技术生成

我写的走马灯

以上链接是我挂在github上的网页demo，大家可以先看一下效果。几个板块的内容会自动跑起来，当我们把鼠标移到某个板块上，就可以使滚动暂停，查看板块详情。点击板块，可以观看每个板块的视频。

html和javascript也可以实现这个效果，但本文介绍的主要是仅仅利用html和css语言就实现走马灯一样滚屏播放效果，主要运用了动画animation的知识点。

首先在body建一个盒子对象，用来装我们后面放进去的图片或者超链接。

<a><a/>里面装的是超链接，用来连接本网页和其他网页。

<div class="box">
        <ul>
            <a href="https://www.bilibili.com/video/BV1FW4y1r79Q?spm_id_from=333.999.0.0&vd_source=a75f23efbd99561a9f2777d0a1bbebb1">
                <li><img class="img" src="./images/a.jpg" alt=""></li>
            </a>
            <a href="https://www.bilibili.com/video/BV1uW4y1y7WE?spm_id_from=333.999.0.0&vd_source=a75f23efbd99561a9f2777d0a1bbebb