HTML+CSS+JS实现 ❤️酷炫彩虹旋转隧道特效❤️

╰半橙微兮° 2022-09-10 06:18 134阅读 0赞

> ## 效果演示：   ##
> 
> ![20210906000222186.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 部分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套][HTML5_100] ###

>   打卡 文章 更新**  39  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210906000222186.gif]: /images/20220829/309082d0494641d48a27432d2b2f9d55.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e54d7be723f94a4494bc3797991c7685.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/82ff1def816048e48198750a17eefe64.png