HTML+CSS【超浪漫的表白网页代码】不会编程也能制作送给女朋友的表白网站

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

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠JS代码
五、🎁更多源码

二、📚网站介绍

📒网站文件方面：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.视频演示

20-爱心雨(满屏爱心飘落)

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>爱心雨title>

    <style>
        body {
            overflow: hidden;
            margin: 0 auto;
            background: url('img/16.jpg') no-repeat;
            background-attachment: fixed;
            background-size: cover;
            -moz-background-size: cover;
            -webkit-background-size: cover;
        }

        .snowfall-flakes:before {
            content: "";
            /*绝对定位*/
            position: absolute;
            left: 0px;
            top: 0px;
            width: 10px;
            height: 16px;
            transform: rotate(-45deg);
            background-color: red;
            border-radius: 5px 5px 1px 1px;
        }

        .snowfall-flakes:after {
            content: "";
            /*激活伪元素的必要因素*/
            position: absolute;
            left: 0px;
            top: 0px;
            width: 10px;
            height: 16px;
            transform: translateX(4.3px) rotate(45deg);
            background-color: red;
            border-radius: 5px 5px 1px 1px;
        }
    style>

head>

<body>

    <div class="wrap">div>

    <script type="text/javascript" src="js/jquery-3.1.1.min.js">script>
    <script type="text/javascript" src="js/snowfall.jquery.min.js">script>
    <script type="text/javascript">
        $(document).snowfall({
            flakeCount: 100,
            maxSpeed: 5
        });
    script>

body>

html>

🏠JS代码

Date.now || (Date.now = function() {
        return (new Date).getTime()
    }),
    function() {
        "use strict";
        for (var t = ["webkit", "moz"], e = 0; e < t.length && !window.requestAnimationFrame; ++e) {
            var i = t[e];
            window.requestAnimationFrame = window[i + "RequestAnimationFrame"], window.cancelAnimationFrame = window[i + "CancelAnimationFrame"] || window[i + "CancelRequestAnimationFrame"]
        }
        if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
            var s = 0;
            window.requestAnimationFrame = function(t) {
                var e = Date.now(),
                    i = Math.max(s + 16, e);
                return setTimeout(function() {
                    t(s = i)
                }, i - e)
            }, window.cancelAnimationFrame = clearTimeout
        }
    }(),
    function(t) {
        t.snowfall = function(e, i) {
            function s(s, n, a, o) {
                this.x = s, this.y = n, this.size = a, this.speed = o, this.step = 0, this.stepSize = h(1, 10) / 100, i.collection && (this.target = m[h(0, m.length - 1)]);
                var r = null;
                i.image ? (r = document.createElement("img"), r.src = i.image) : (r = document.createElement("div"), t(r).css({
                    background: i.flakeColor
                })), t(r).attr({
                    "class": "snowfall-flakes"
                }).css({
                    width: this.size,
                    height: this.size,
                    position: i.flakePosition,
                    top: this.y,
                    left: this.x,
                    fontSize: 0,
                    zIndex: i.flakeIndex
                }), t(e).get(0).tagName === t(document).get(0).tagName ? (t("body").append(t(r)), e = t("body")) : t(e).append(t(r)), this.element = r, this.update = function() {
                    if (this.y += this.speed, this.y > l - (this.size + 6) && this.reset(), this.element.style.top = this.y + "px", this.element.style.left = this.x + "px", this.step += this.stepSize, this.x += y === !1 ? Math.cos(this.step) : y + Math.cos(this.step), i.collection && this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y) {
                        var t = this.target.element.getContext("2d"),
                            e = this.x - this.target.x,
                            s = this.y - this.target.y,
                            n = this.target.colData;
                        if (void 0 !== n[parseInt(e)][parseInt(s + this.speed + this.size)] || s + this.speed + this.size > this.target.height)
                            if (s + this.speed + this.size > this.target.height) {
                                for (; s + this.speed + this.size > this.target.height && this.speed > 0;) this.speed *= .5;
                                t.fillStyle = "#fff", void 0 == n[parseInt(e)][parseInt(s + this.speed + this.size)] ? (n[parseInt(e)][parseInt(s + this.speed + this.size)] = 1, t.fillRect(e, s + this.speed + this.size, this.size, this.size)) : (n[parseInt(e)][parseInt(s + this.speed)] = 1, t.fillRect(e, s + this.speed, this.size, this.size)), this.reset()
                            } else this.speed = 1, this.stepSize = 0, parseInt(e) + 1 < this.target.width && void 0 == n[parseInt(e) + 1][parseInt(s) + 1] ? this.x++ : parseInt(e) - 1 > 0 && void 0 == n[parseInt(e) - 1][parseInt(s) + 1] ? this.x-- : (t.fillStyle = "#fff", t.fillRect(e, s, this.size, this.size), n[parseInt(e)][parseInt(s)] = 1, this.reset())
                    }(this.x + this.size > d - c || this.x < c) && this.reset()
                }, this.reset = function() {
                    this.y = 0, this.x = h(c, d - c), this.stepSize = h(1, 10) / 100, this.size = h(100 * i.minSize, 100 * i.maxSize) / 100, this.element.style.width = this.size + "px", this.element.style.height = this.size + "px", this.speed = h(i.minSpeed, i.maxSpeed)
                }
            }

            function n() {
                for (r = 0; r < a.length; r += 1) a[r].update();
                f = requestAnimationFrame(function() {
                    n()
                })
            }
            var a = [],
                o = {
                    flakeCount: 35,
                    flakeColor: "#ffffff",
                    flakePosition: "absolute",
                    flakeIndex: 999999,
                    minSize: 1,
                    maxSize: 2,
                    minSpeed: 1,
                    maxSpeed: 5,
                    round: !1,
                    shadow: !1,
                    collection: !1,
                    collectionHeight: 40,
                    deviceorientation: !1
                },
                i = t.extend(o, i),
                h = function(t, e) {
                    return Math.round(t + Math.random() * (e - t))
                };
            t(e).data("snowfall", this);
            var r = 0,
                l = t(e).height(),
                d = t(e).width(),
                c = 0,
                f = 0;
            if (i.collection !== !1) {
                var p = document.createElement("canvas");
                if (p.getContext && p.getContext("2d"))
                    for (var m = [], w = t(i.collection), g = i.collectionHeight, r = 0; r < w.length; r++) {
                        var u = w[r].getBoundingClientRect(),
                            x = t(", {
                                "class": "snowfall-canvas"
                            }),
                            z = [];
                        if (u.top - g > 0) {
                            t("body").append(x), x.css({
                                position: i.flakePosition,
                                left: u.left + "px",
                                top: u.top - g + "px"
                            }).prop({
                                width: u.width,
                                height: g
                            });
                            for (var v = 0; v < u.width; v++) z[v] = [];
                            m.push({
                                element: x.get(0),
                                x: u.left,
                                y: u.top - g,
                                width: u.width,
                                height: g,
                                colData: z
                            })
                        }
                    } else i.collection = !1
            }
            for (t(e).get(0).tagName === t(document).get(0).tagName && (c = 25), t(window).bind("resize", function() {
                    l = t(e)[0].clientHeight, d = t(e)[0].offsetWidth
                }), r = 0; r < i.flakeCount; r += 1) a.push(new s(h(c, d - c), h(0, l), h(100 * i.minSize, 100 * i.maxSize) / 100, h(i.minSpeed, i.maxSpeed)));
            i.round && t(".snowfall-flakes").css({
                "-moz-border-radius": i.maxSize,
                "-webkit-border-radius": i.maxSize,
                "border-radius": i.maxSize
            }), i.shadow && t(".snowfall-flakes").css({
                "-moz-box-shadow": "1px 1px 1px #555",
                "-webkit-box-shadow": "1px 1px 1px #555",
                "box-shadow": "1px 1px 1px #555"
            });
            var y = !1;
            i.deviceorientation && t(window).bind("deviceorientation", function(t) {
                y = .1 * t.originalEvent.gamma
            }), n(), this.clear = function() {
                t(".snowfall-canvas").remove(), t(e).children(".snowfall-flakes").remove(), cancelAnimationFrame(f)
            }
        }, t.fn.snowfall = function(e) {
            return "object" == typeof e || void 0 == e ? this.each(function() {
                new t.snowfall(this, e)
            }) : "string" == typeof e ? this.each(function() {
                var e = t(this).data("snowfall");
                e && e.clear()
            }) : void 0
        }
    }(jQuery);

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

相关阅读:
Angular 配置开发环境
 Java - Gson和Fastjson如何选择？
【kubernetes】k8s对象☞pod
MySQL---排序与分页
 Linux下OpenCV出现错误：ASSERT false in file qasciikey.cpp, line 501
基于vue框架潮牌官网设计与实现毕业设计源码010955
（附源码）springboot电商系统前端界面设计与浏览器兼容性研究毕业设计 231058
自动激光分板系统（自动PCB激光分板系统)市场现状分析
 什么是 PWA
nios烧写到EPCS的问题处理
原文地址：https://blog.csdn.net/p305114466/article/details/126995332