HTML+CSS+JS实现 ❤️酷炫彩虹旋转隧道特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️酷炫彩虹旋转隧道特效❤️
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果演示：??
???代碼目錄：
主要代碼實現：
部分CSS樣式：
#c {position: absolute;top: calc(50vh - 200px);left: calc(50vw - 200px);}#alpha {position: absolute;top: calc(50vh + 220px);left: calc(50vw - 50px);width: 100px;height: 40px;background-color: #000;border: none;font: 20px Verdana;color: white;text-shadow: 0 0 2px white;cursor: pointer;transition: .4s;}#alpha:focus {outline: none;}#alpha:hover {background-color: #555;}#overlay {position: absolute;width: 400px;height: 400px;top: calc(50vh - 200px);left: calc(50vw - 200px);background-image: radial-gradient(transparent 20%, #111 69%);}HTML代碼 :
<body><canvas id=c></canvas><button id=alpha>alpha</button><div id=overlay></div><script>var w = c.width =h = c.height = 400,ctx = c.getContext('2d'),total = 50,particlesParRow = 10,minValue = 30,updatesBeforeStart = 500,repaintColor = 'rgba(0, 0, 0, .04)',templateColor = 'hsl(hue, 80%, 50%)',particles = [],colors = [],radiants = [],colorPart = 360 / total,radiantPart = Math.PI * 2 / total,alphaValue = true;for (var i = 0; i < total; ++i) {var array = [];particles.push(array);colors.push(templateColor.replace('hue', colorPart * i));radiants.push(radiantPart * i);for (var j = 0; j < particlesParRow; ++j) {array.push(i * minValue);}}for (var i = 0; i < updatesBeforeStart; ++i) update();function anim() {window.requestAnimationFrame(anim);ctx.fillStyle = repaintColor;ctx.beginPath();ctx.arc(w / 2, h / 2, w / 2 + 1, 0, Math.PI * 2);ctx.fill();ctx.closePath();ctx.translate(w / 2, h / 2);ctx.rotate(.006);ctx.translate(-w / 2, -h / 2);for (var i = 0; i < total; ++i) {ctx.fillStyle = colors[i];for (var j = 0; j < particlesParRow; ++j) {var particle = particles[i][j];particles[i][j] -= particle / 70;ctx.beginPath();ctx.arc(w / 2, h / 2, particle, radiants[i], radiants[i] + radiantPart);ctx.arc(w / 2, h / 2, particles[i][j], radiants[i] + radiantPart, radiants[i], true);ctx.closePath();ctx.fill();if (particles[i][j] <= minValue && Math.random() < .1) {particles[i][j] = w / 2;}}}}anim();function update() {for (var i = 0; i < total; ++i) {for (var j = 0; j < particlesParRow; ++j) {var particle = particles[i][j];particles[i][j] -= particle / 70;if (particles[i][j] <= minValue && Math.random() < .1) {particles[i][j] = w / 2;}}}}alpha.addEventListener('click', function() {if (alphaValue) {alphaValue = false;repaintColor = 'black';alpha.textContent = 'solid';} else {alphaValue = true;repaintColor = 'rgba(0, 0, 0, .04)';alpha.textContent = 'alpha';}})</script></body>源碼獲取
查看博主主頁或私信博主獲取
精彩推薦更新中：
HTML5大作業實戰100套
??打卡 文章 更新? 39??/? 100天
大家可以點贊、收藏、關注、評論我啦 、需要完整文件隨時聯系我或交流喲~！
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️酷炫彩虹旋转隧道特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JS实现 ❤️响应式图
- 下一篇： HTML+CSS+JS实现 ❤️夜晚云层