5款网页表白代码（附带源码）

前言

大部分人都有喜欢的人，学会这些表白代码，下次表白你肯定会成功。希望自己也有个女朋友，哈哈开玩笑了

---

效果图及部分源码

1.爱心

部分代码

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: pink;

        }

        #frame {
            position: relative;
            width: 400px;
            height: 300px;
            margin: 250px auto;
        }

        .left,
        .right {
            top: 0;
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        .left {
            left: 35px;

        }

        .right {
            right: 35px;
            z-index: -1;
        }

        .bottom {
            bottom: 36px;
            left: 100px;
            width: 200px;
            height: 200px;
            transform: rotate(45deg);
            z-index: -1;

        }

        .heart {
            position: absolute;
            box-shadow: 0 0 40px #d5093c;
            animation: beat .4s ease infinite normal;
            background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
        }

        @keyframes beat {
            0% {
                transform: scale(1) rotate(225deg);
                box-shadow: 0 0 40px #d5093c;
            }

            50% {
                transform: scale(1.1) rotate(225deg);
                box-shadow: 0 0 70px #d5093c;
            }

            100% {
                transform: scale(1) rotate(225deg);
                box-shadow: 0 0 40px #d5093c;
                ;
            }
        }

        .word {
            position: absolute;
            width: 50%;
            top: 75%;
            left: 25%;
            text-align: center;
            transform: translateY(-50%);
            font-family: 'Love Ya Like A Sister', cursive;
            font-size: 40px;
            color: #c70012;
            padding: 0 20px;
        }
    </style>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

2.玫瑰花

部分源码

 <style>
    .container {
      background: rgb(255, 192, 203);
      color: white;
      text-align: center;
      width: 500px;
      height: 500px;
      margin-top: 100px;
      margin-left: auto;
      margin-right: auto;
    }

    .word {
      position: fixed;
      text-align: center;
      width: 500px;
      height: 100px;
      transform: translateY(-50%);
      font-family: 楷体;
      font-size: 40px;
      color: #c70012;
    }
  </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.爱心树

部分源码

<script>
        (function () {
            var canvas = $('#canvas');

            if (!canvas[0].getContext) {
                $("#error").show();
                return false;
            }

            var width = canvas.width();
            var height = canvas.height();

            canvas.attr("width", width);
            canvas.attr("height", height);

            var opts = {
                seed: {
                    x: width / 2 - 20,
                    color: "rgb(190, 26, 37)",
                    scale: 2
                },
                branch: [
                    [535, 680, 570, 250, 500, 200, 30, 100, [
                        [540, 500, 455, 417, 340, 400, 13, 100, [
                            [450, 435, 434, 430, 394, 395, 2, 40]
                        ]],
                        [550, 445, 600, 356, 680, 345, 12, 100, [
                            [578, 400, 648, 409, 661, 426, 3, 80]
                        ]],
                        [539, 281, 537, 248, 534, 217, 3, 40],
                        [546, 397, 413, 247, 328, 244, 9, 80, [
                            [427, 286, 383, 253, 371, 205, 2, 40],
                            [498, 345, 435, 315, 395, 330, 4, 60]
                        ]],
                        [546, 357, 608, 252, 678, 221, 6, 100, [
                            [590, 293, 646, 277, 648, 271, 2, 80]
                        ]]
                    ]]
                ],
                bloom: {
                    num: 700,
                    width: 1080,
                    height: 650,
                },
                footer: {
                    width: 1200,
                    height: 5,
                    speed: 10,
                }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

4.可爱的表白网页（二次元）

部分源码

<script>
    //判断客户端设备，选择写入meta
    function init_viewport() {
      if (navigator.userAgent.indexOf("Android") != -1) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
          var width =
            window.outerWidth == 0 ? window.screen.width : window.outerWidth;
          var phoneScale = parseInt(width) / 500;
          document.write(
            '<meta name="viewport" content="width=500, minimum-scale = ' +
            phoneScale +
            ", maximum-scale = " +
            phoneScale +
            ', target-densitydpi=device-dpi">'
          );
        } else {
          document.write(
            '<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">'
          );
        }
      } else if (navigator.userAgent.indexOf("iPhone") != -1) {
        var phoneScale = parseInt(window.screen.width) / 500;
        document.write(
          '<meta name="viewport" content="width=500, min-height=750, initial-scale=' +
          phoneScale +
          ", maximum-scale=" +
          phoneScale +
          ', user-scalable=0" /> '
        ); //0.75   0.82
      } else {
        document.write(
          '<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '
        ); //0.75  0.82
      }
    }
    init_viewport();

    var theme = "pure_words";
    console.log("theme ->" + theme);
    var theme_content = {
      pure_words_content:
        "遇见你，是我所有美好故事的开始，看见你的第一眼，上帝就在我耳边说了四个字，在劫难逃!\n你的过去我来不及参与，你的未来我一定奉陪到底！\n我爱你！<um style='color: #F44336;'>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/640353