HTML+CSS+JS实现 ❤️酷炫的canvas全屏背景动画特效❤️

🍅 作者主页: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()
        }

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~!

打卡 文章 更新 44  /  100天

精彩推荐更新中:

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》

  • 9
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java李杨勇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值