HTML+CSS+JS实现 ❤️酷炫彩虹旋转隧道特效❤️
Posted java李阳勇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现 ❤️3D旋转魔方图片相册特效❤️