HTML+CSS+JS实现 ❤️酷炫的canvas全屏背景动画特效❤️_java李阳勇的博客

🍅 作者主页：Java李杨勇 

🍅 简介：Java领域优质创作者🏆、Java李杨勇公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示： 文末获取源码 

代码目录：

主要代码实现：

CSS样式：

 .codrops-demos {
            font-size: 0.8em;
            text-align: center;
            position: absolute;
            z-index: 99;
            width: 96%;
        }

        .codrops-demos a {
            display: inline-block;
            margin: 0.35em 0.1em;
            padding: 0.5em 1.2em;
            outline: none;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            border-radius: 2px;
            font-size: 110%;
            border: 2px solid transparent;
            color: #fff;
        }

        .codrops-demos a:hover,
        .codrops-demos a.current-demo {
            border-color: #383a3c;
        }

HTML代码 :

 <nav class="codrops-demos">
        <a class="current-demo" href="index.html">Demo 1</a>
        <a href="index2.html">Demo 2</a>
        <a href="index3.html">Demo 3</a>
        <a href="index4.html">Demo 4</a>
        <a href="index5.html">Demo 5</a>
        <a href="index6.html">Demo 6</a>
        <a href="index7.html">Demo 7</a>
    </nav>

    <canvas id="c"></canvas>

    <script type="text/javascript">
        var w = c.width = window.innerWidth,
            h = c.height = window.innerHeight,
            ctx = c.getContext('2d'),
            opts = {
                len: 20,
                count: 50,
                baseTime: 10,
                addedTime: 10,
                dieChance: .05,
                spawnChance: 1,
                sparkChance: .1,
                sparkDist: 10,
                sparkSize: 2,
                color: 'hsl(hue,100%,light%)',
                baseLight: 50,
                addedLight: 10,
                shadowToTimePropMult: 6,
                baseLightInputMultiplier: .01,
                addedLightInputMultiplier: .02,
                cx: w / 2,
                cy: h / 2,
                repaintAlpha: .04,
                hueChange: .1
            },
            tick = 0,
            lines = [],
            dieX = w / 2 / opts.len,
            dieY = h / 2 / opts.len,
            baseRad = Math.PI * 2 / 6;
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, w, h);

        function loop() {
            window.requestAnimationFrame(loop);
            ++tick;
            ctx.globalCompositeOperation = 'source-over';
            ctx.shadowBlur = 0;
            ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
            ctx.fillRect(0, 0, w, h);
            ctx.globalCompositeOperation = 'lighter';
            if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);
            lines.map(function(line) {
                line.step()
            })
        }

        function Line() {
            this.reset()
        }
        Line.prototype.reset = function() {
            this.x = 0;
            this.y = 0;
            this.addedX = 0;
            this.addedY = 0;
            this.rad = 0;
            this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
            this.color = opts.color.replace('hue', tick * opts.hueChange);
            this.cumulativeTime = 0;
            this.beginPhase()
        }
        Line.prototype.beginPhase = function() {
            this.x += this.addedX;
            this.y += this.addedY;
            this.time = 0;
            this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;
            this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
            this.addedX = Math.cos(this.rad);
            this.addedY = Math.sin(this.rad);
            if (Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) this.reset()
        }

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方