我寫的走馬燈
以上鏈接是我掛在github上的網(wǎng)頁demo,大家可以先看一下效果。幾個(gè)板塊的內(nèi)容會自動(dòng)跑起來,當(dāng)我們把鼠標(biāo)移到某個(gè)板塊上,就可以使?jié)L動(dòng)暫停,查看板塊詳情。點(diǎn)擊板塊,可以觀看每個(gè)板塊的視頻。
html和javascript也可以實(shí)現(xiàn)這個(gè)效果,但本文介紹的主要是僅僅利用html和css語言就實(shí)現(xiàn)走馬燈一樣滾屏播放效果,主要運(yùn)用了動(dòng)畫animation的知識點(diǎn)。
首先在body建一個(gè)盒子對象,用來裝我們后面放進(jìn)去的圖片或者超鏈接。文章來源:http://www.zghlxwxcb.cn/news/detail-527328.html
<a><a/>里面裝的是超鏈接,用來連接本網(wǎng)頁和其他網(wǎng)頁。文章來源地址http://www.zghlxwxcb.cn/news/detail-527328.html
<div class="box">
<ul>
<a >
<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
到了這里,關(guān)于如何用簡單的HTML代碼實(shí)現(xiàn)滾屏播放的網(wǎng)頁效果的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!