我写的走马灯
以上链接是我挂在github上的网页demo,大家可以先看一下效果。几个板块的内容会自动跑起来,当我们把鼠标移到某个板块上,就可以使滚动暂停,查看板块详情。点击板块,可以观看每个板块的视频。
html和javascript也可以实现这个效果,但本文介绍的主要是仅仅利用html和css语言就实现走马灯一样滚屏播放效果,主要运用了动画animation的知识点。
首先在body建一个盒子对象,用来装我们后面放进去的图片或者超链接。文章来源:https://www.toymoban.com/news/detail-527328.html
<a><a/>里面装的是超链接,用来连接本网页和其他网页。文章来源地址https://www.toymoban.com/news/detail-527328.html
<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
到了这里,关于如何用简单的HTML代码实现滚屏播放的网页效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!