HTML
Document
彩虹进度条 |
var CL = document.getElementById("colorline"); function makeCLine(){ var r =255; var g = 0; var b = 0; var step = 1; // 1.增加绿色 // 2.减少红色 // 3.增加蓝色 // 4.减少绿色 for(var i=0; i<80; i++){ var node = document.createElement("div"); if(g > 255 && step == 1) step = 2; if(r < 0 && step == 2) step = 3; if(b > 255 && step == 3) step = 4; node.style.backgroundColor = "rgb("+ r + "," + g + "," + b + ")"; CL.appendChild(node); if(step == 1) g+=14; if(step ==2) r-=14; if(step == 3) b+=14; if(step == 4) g-=14; } var oNodeL = CL.firstChild; var oNodeR = CL.lastChild; for(var i = 0; i < 20; i ++){ oNodeL.style.cssText += ";opacity:" + (0.05 * i); oNodeR.style.cssText += ";opacity:" + (0.05 * i); oNodeL = oNodeL.nextSibling; oNodeR = oNodeR.previousSibling; } } function makeCLmove(){ var colors = []; for(var i = CL.lastChild; i; i = i.previousSibling){ if(i.style){ colors.unshift(i.style.backgroundColor); } var flag = 1; var j = 0; setInterval(function(){ var sTempColor = CL.lastChild.style.backgroundColor; var oNodeL = CL.firstChild; for(var i = CL.lastChild; i; i = i.previousSibling){ if(i.previousSibling && i.previousSibling.style){ i.style.backgroundColor = i.previousSibling.style.backgroundColor; } if(j > (colors.length - 1)){ flag = 0; }else if(j <1){ flag = 1; oNodeL.style.backgroundColor = flag ? colors[j++] : colors[j--]; } } }, 100) } } makeCLine(); setInterval("makeCLmove()","10")
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49984.html
HTML Document #bg{ position:absolute; left: 0; top:0; width: 100%; height:100%; background-color:#000; text-align: center; ...
摘要:实现彩虹画笔绘画板指南作者简介是推出的一个天挑战。这部分不涉及内容,全部由来实现。实现彩虹画笔绘画板效果图项目源码分析源码获取节点支持不支持彩虹效控制笔触大小控制绘制路径源码分析宽高设置属性笔触的形状,有圆平方三种。 Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑...
阅读 3388·2021-11-15 11:39
阅读 1485·2021-09-22 10:02
阅读 1277·2021-08-27 16:24
阅读 3566·2019-08-30 15:52
阅读 3318·2019-08-29 16:20
阅读 791·2019-08-28 18:12
阅读 517·2019-08-26 18:27
阅读 687·2019-08-26 13:32