js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果
左側(cè)可用調(diào)色板選擇條紋顏色
效果圖:
代碼如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{margin:0; padding:0;} @-webkit-keyframes demo{ from{ left:0;} to{ left:-113px;} } .box{ width:120px; height:400px; border:1px solid #000; margin:100px auto; position:relative; overflow:hidden;} .bar{ position:absolute; left:0; top:0; width:500px; height:400px; background: -webkit-repeating-linear-gradient(-45deg , red 0px, red 20px, #fff 20px, #fff 40px, blue 40px, blue 60px, #fff 60px, #fff 80px); animation:demo 2s linear infinite; } </style> <script> window.onload = function(){ var oC1 = document.querySelectorAll('input')[0]; var oC2 = document.querySelectorAll('input')[1]; var oBar = document.querySelector('.box .bar'); oC1.onchange = oC2.onchange = function(){ oBar.style.background = '-webkit-repeating-linear-gradient(-45deg , '+oC1.value+' 0px, '+oC1.value+' 20px, #fff 20px, #fff 40px, '+oC2.value+' 40px, '+oC2.value+' 60px, #fff 60px, #fff 80px)'; }; }; </script> </head> <body> <input type="color" value="#ff0000" /> <input type="color" value="#0000ff" /> <div class="box"> <div class="bar"></div> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)簡(jiǎn)單的二維矩陣乘積運(yùn)算
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的二維矩陣乘積運(yùn)算方法,涉及JavaScript基于數(shù)組操作實(shí)現(xiàn)矩陣運(yùn)算的功能,需要的朋友可以參考下2016-01-01JavaScript中數(shù)組添加值和訪問(wèn)值常見(jiàn)問(wèn)題
這篇文章主要介紹了JavaScript中數(shù)組添加值和訪問(wèn)值常見(jiàn)問(wèn)題的相關(guān)資料2016-02-02uni-app實(shí)現(xiàn)數(shù)據(jù)下拉刷新功能實(shí)例
很多列表頁(yè)總數(shù)量很大,一次性查詢加載會(huì)導(dǎo)致頁(yè)面有很長(zhǎng)時(shí)間的空白期,自然體驗(yàn)感極差,就會(huì)使用分頁(yè)加載數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于uni-app實(shí)現(xiàn)數(shù)據(jù)下拉刷新功能實(shí)例的相關(guān)資料,需要的朋友可以參考下2022-08-08關(guān)于JavaScript的單雙引號(hào)嵌套問(wèn)題
單引號(hào)和雙引號(hào)之間可以相互嵌套。接下來(lái)通過(guò)本文給大家介紹JavaScript的單雙引號(hào)嵌套問(wèn)題 ,感興趣的朋友一起看看吧2017-08-08JS判斷不同分辨率調(diào)用不同的CSS樣式文件實(shí)現(xiàn)思路及測(cè)試代碼
最近看一個(gè)網(wǎng)站,發(fā)現(xiàn)顯示器不同的分辨率,樣式文件調(diào)用的也不一樣,于是很好奇研究并寫了一個(gè),經(jīng)測(cè)試感覺(jué)還不錯(cuò),感興趣的你可以來(lái)看看哦2013-01-01關(guān)于ExtJS4.1:快捷鍵支持的問(wèn)題
本篇文章小編為大家介紹,關(guān)于ExtJS4.1 快捷鍵支持的問(wèn)題。需要的朋友參考下2013-04-04Javascript讀取json文件方法實(shí)例總結(jié)
json文件是一種輕量級(jí)的數(shù)據(jù)交互格式,下面這篇文章主要給大家介紹了關(guān)于Javascript讀取json文件方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11微信小程序?qū)崿F(xiàn)簡(jiǎn)單的吸頂效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的吸頂效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05javascript instanceof 內(nèi)部機(jī)制探析
在 JavaScript 中,可以用 instanceof 來(lái)判斷一個(gè)對(duì)象是不是某個(gè)類或其子類的實(shí)例。2010-10-10