html七夕情人节表白示爱网站源码制作 (程序员表白代码大全)

最新推荐文章于 2024-08-11 17:47:06 发布

IT黑马程序员

最新推荐文章于 2024-08-11 17:47:06 发布

阅读量766

点赞数

分类专栏：学生网页设计作业文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/qq_38513433/article/details/127344650

版权

学生网页设计作业专栏收录该内容

2018 篇文章 137 订阅

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript创建的3D动态爱心动画项目。该动画利用Simplex噪声算法实现了动态效果，并通过Canvas绘制出不同大小的旋转爱心图案。代码中详细展示了HTML结构、JavaScript特效实现以及如何运用Simplex噪声提升视觉体验。

摘要由CSDN通过智能技术生成

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

100-爱心3

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

<html>

<head>
    <meta charset="utf-8">
    <script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        function reload_html() {
            $("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"]("");
        }

        function addhtml(lViZBL1) {
            $("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"](lViZBL1);
        }

        function addcss(CDEsDFFJ2) {
            var EZS_sF3 = window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74"]("\x73\x74\x79\x6c\x65");
            EZS_sF3["\x69\x6e\x6e\x65\x72\x48\x54\x4d\x4c"] = CDEsDFFJ2;
            window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72"]("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64\x43\x68\x69\x6c\x64"](EZS_sF3);
        }

        function addjs(qGZu4) {
            $("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64"](qGZu4);
        }

        function jqban(nJ5) {
            $("\x23\x6a\x71\x62\x62")["\x61\x74\x74\x72"]("\x73\x72\x63", "\x68\x74\x74\x70\x3a\x2f\x2f\x6c\x69\x62\x73\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x6a\x71\x75\x65\x72\x79\x2f" + nJ5 + "\x2f\x6a\x71\x75\x65\x72\x79\x2e\x6d\x69\x6e\x2e\x6a\x73");
        }
    </script>
    <style type="text/css">
        body,
        html {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script>

                if (x0 > y0) rankx++;
                else ranky++;
                if (x0 > z0) rankx++;
                else rankz++;
                if (x0 > w0) rankx++;
                else rankw++;
                if (y0 > z0) ranky++;
                else rankz++;
                if (y0 > w0) ranky++;
                else rankw++;
                if (z0 > w0) rankz++;
                else rankw++;
                var i1, j1, k1, l1; // The integer offsets for the second simplex corner
                var i2, j2, k2, l2; // The integer offsets for the third simplex corner
                var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
                // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
                // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
                // impossible. Only the 24 indices which have non-zero entries make any sense.
                // We use a thresholding to set the coordinates in turn from the largest magnitude.
                // Rank 3 denotes the largest coordinate.
                i1 = rankx >= 3 ? 1 : 0;
                j1 = ranky >= 3 ? 1 : 0;
                k1 = rankz >= 3 ? 1 : 0;
                l1 = rankw >= 3 ? 1 : 0;
                // Rank 2 denotes the second largest coordinate.
                i2 = rankx >= 2 ? 1 : 0;
                j2 = ranky >= 2 ? 1 : 0;
                k2 = rankz >= 2 ? 1 : 0;
                l2 = rankw >= 2 ? 1 : 0;
                // Rank 1 denotes the second smallest coordinate.
                i3 = rankx >= 1 ? 1 : 0;
                j3 = ranky >= 1 ? 1 : 0;
                k3 = rankz >= 1 ? 1 : 0;
                l3 = rankw >= 1 ? 1 : 0;
                // The fifth corner has all coordinate offsets = 1, so no need to compute that.
                var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
                var y1 = y0 - j1 + G4;
                var z1 = z0 - k1 + G4;
                var w1 = w0 - l1 + G4;
                var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
                var y2 = y0 - j2 + 2.0 * G4;
                var z2 = z0 - k2 + 2.0 * G4;
                var w2 = w0 - l2 + 2.0 * G4;
                var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
                var y3 = y0 - j3 + 3.0 * G4;
                var z3 = z0 - k3 + 3.0 * G4;
                var w3 = w0 - l3 + 3.0 * G4;
                var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
                var y4 = y0 - 1.0 + 4.0 * G4;
                var z4 = z0 - 1.0 + 4.0 * G4;
                var w4 = w0 - 1.0 + 4.0 * G4;
                // Work out the hashed gradient indices of the five simplex corners
                var ii = i & 255;
                var jj = j & 255;
                var kk = k & 255;
                var ll = l & 255;
                // Calculate the contribution from the five corners
                var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
                if (t0 < 0) n0 = 0.0;
                else {
                    var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
                    t0 *= t0;
                    n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
                }
                var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
                if (t1 < 0) n1 = 0.0;
                else {
                    var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
                    t1 *= t1;
                    n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
                }
                var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
                if (t2 < 0) n2 = 0.0;
                else {
                    var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
                    t2 *= t2;
                    n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
                }
                var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
                if (t3 < 0) n3 = 0.0;
                else {
                    var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
                    t3 *= t3;
                    n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
                }
                var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
                if (t4 < 0) n4 = 0.0;
                else {
                    var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
                    t4 *= t4;
                    n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
                }
                // Sum up and scale the result to cover the range [-1,1]
                return 27.0 * (n0 + n1 + n2 + n3 + n4);
            }
        };

        function buildPermutationTable(random) {
            var i;
            var p = new Uint8Array(256);
            for (i = 0; i < 256; i++) {
                p[i] = i;
            }
            for (i = 0; i < 255; i++) {
                var r = i + ~~(random() * (256 - i));
                var aux = p[i];
                p[i] = p[r];
                p[r] = aux;
            }
            return p;
        }
        SimplexNoise._buildPermutationTable = buildPermutationTable;

        // amd
        if (typeof define !== 'undefined' && define.amd) define(function() {
            return SimplexNoise;
        });
        // common js
        if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
        // browser
        else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
        // nodejs
        if (typeof module !== 'undefined') {
            module.exports = SimplexNoise;
        }

    })();

    var canvas = void 0;
    var ctx = void 0;
    var simplex = void 0;
    var ticker = void 0;

    function setup() {
        ticker = 0;
        simplex = new SimplexNoise();
        canvas = document.querySelector("#canvas");
        ctx = canvas.getContext("2d");
        reset();
        window.addEventListener("resize", reset);
    }

    function reset() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
        ctx.fillRect(0, 0, w, h);
        ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
        ctx.strokeStyle = "red";
        ctx.lineWidth = 2;
    }

    function draw() {
        requestAnimationFrame(draw);
        ctx.fillRect(0, 0, w, h);
        for (var i = 1; i < 7; i++) {
            var size = Math.min(w, h) * 0.004 * i;
            drawHeart(w / 2, h / 2, size);
        }
        ticker += 0.01;
    }

    function drawHeart(x0, y0, size) {
        ctx.beginPath();
        var zoom = 0.03;
        var noiseFactor = 0.08 * size;
        for (var angle = 0; angle < Math.PI * 2; angle += 0.01) {
            var xc = Math.cos(angle);
            var yc = Math.sin(angle);
            var n = simplex.noise3D(xc / zoom, yc / zoom, ticker + size * 100) * noiseFactor;
            var r = size + n;
            var x = r * 16 * Math.pow(Math.sin(angle), 3);
            var y = -r * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));
            ctx.lineTo(x0 + x, y0 + y);
        }
        ctx.stroke();
    }

    setup();
    draw();
</script>

</html>