devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML超级浪漫的独一无二的爱心表白代码，亲测可用！_爱心表白代码html大全

作者：菜鸟追梦旅行 | 2024-02-20 18:59:18

赞

踩

爱心表白代码html大全

话不多说代码给上，感觉不错还请一键三联！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2klEQVQ4T62TUQ6CMAyG2/GCByAeR7iSxmfgmahHch7HcAB5YSXb2GBlmCW6t6Xtt7/tP4QfD7r6Pu9KwKx29+Jzrtbs/nB/xmIGYIr1wcwnAY0BIBYrhqucAY8akBrejSJqBQjaix2HS4MraVZFeOR83Y05QCwhZbzyD4C8KxWIUiD6DaQ8beej7BDf+a0RiCcASG1FKqKXGSLzwbLGbzJorPQKzeYDAPdCDDL7YwPwhlrcyNuxK6WxdcWBgohtNwBu730AtzaTvX7Mz4C3G3wuJjsJkOIFnTMBCHFmkktRl00AAAAASUVORK5CYII=" />
  6.     <title>code</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body {
  13.             background-color: #000;
  14.             overflow: hidden;
  15.             min-width: 1600px;
  16.             min-height: 900px;
  17.         }
  18.         .box {
  19.             transform: rotate3d(0, 0, 0, 0deg);
  20.             transform-origin: 926px 576px;
  21.             transition: transform 5s;
  22.             transform-style: preserve-3d;
  23.         }
  24.         .stars {
  25.             position: absolute;
  26.             top: 50%;
  27.             left: 50%;
  28.             width: 3px;
  29.             height: 3px;
  30.             border-radius: 50%;
  31.             animation: opacity 3s linear infinite;
  32.         }
  33.         @keyframes opacity {
  34.             0% {
  35.                 opacity: .9;
  36.             }
  37.             50% {
  38.                 opacity: .5;
  39.             }
  40.             100% {
  41.                 opacity: .99;
  42.             }
  43.         }
  44.         @keyframes animationColor {
  45.             0% {
  46.                 background-position: 0 0;
  47.             }
  48.             100% {
  49.                 background-position: -100% 0;
  50.             }
  51.         }
  52.         span {
  53.             position: absolute;
  54.             left: 100px;
  55.             top: 100px;
  56.             font-size: 32px;
  57.             font-weight: bolder;
  58.             font-family: cursive;
  59.             color: #ccc;
  60.             transition-property: left, top, transform, opacity;
  61.             transition-timing-function: ease;
  62.             -moz-transition-timing-function: ease;
  63.             -webkit-transition-timing-function: ease;
  64.             -o-transition-timing-function: ease;
  65.             transition-duration: 100ms;
  66.         }
  67.         @keyframes show_temp_me {
  68.             from {
  69.                 opacity: 0;
  70.             }
  71.             to {
  72.                 opacity: 1;
  73.             }
  74.         }
  75.         .heart {
  76.             opacity: 0;
  77.             position: absolute;
  78.             left: 1340px;
  79.             top: 546px;
  80.             font-size: 100px;
  81.             color: #f00;
  82.             text-shadow: 2px 2px 2px #f00;
  83.             z-index: 999;
  84.             transition: opacity 5s;
  85.         }
  86.         .heartBroken {
  87.             filter: blur(0.007em);
  88.         }
  89.         .heartBroken::before,
  90.         .heartBroken::after {
  91.             content: "❤";
  92.             position: absolute;
  93.             top: 0;
  94.             left: 0;
  95.             transform-origin: 50% 80%;
  96.         }
  97.         .heartBroken::before {
  98.             animation: crack1 2.5s linear 1s forwards;
  99.             clip-path: inset(0 50% 0 0);
  100.         }
  101.  
  102.         .heartBroken::after {
  103.             animation: crack2 1.5s linear 200ms forwards;
  104.             clip-path: inset(0 0 0 50%);
  105.         }
  106.         @keyframes crack1 {
  107.             0% {
  108.                 transform: rotateZ(0deg);
  109.             }
  110.  
  111.             100% {
  112.  
  113.                 transform: rotateZ(-10deg);
  114.             }
  115.         }
  116.         @keyframes crack2 {
  117.             0% {
  118.                 transform: rotateZ(0deg);
  119.             }
  120.  
  121.             100% {
  122.                 transform: rotateZ(10deg);
  123.             }
  124.         }
  125.         @keyframes beat {
  126.             0% {
  127.                 transform: scale(1);
  128.             }
  129.             50% {
  130.                 transform: scale(1.2)
  131.             }
  132.             100% {
  133.                 transform: scale(1)
  134.             }
  135.         }
  136.         .box > div {
  137.             position: relative;
  138.             transition-property: left, top, opacity;
  139.             transition-duration: 3s;
  140.             transition-timing-function: ease-out;
  141.         }
  142.         span {
  143.             position: absolute;
  144.             left: 100px;
  145.             top: 100px;
  146.             font-size: 22px;
  147.             font-weight: bolder;
  148.             font-family: cursive;
  149.             color: #ccc;
  150.             transition-property: left, top, transform, opacity;
  151.             transition-timing-function: ease;
  152.             -moz-transition-timing-function: ease;
  153.             -webkit-transition-timing-function: ease;
  154.             -o-transition-timing-function: ease;
  155.             transition-duration: 100ms;
  156.         }
  157.         .broken {
  158.             transform: rotateZ(0deg);
  159.             transition-property: transform;
  160.             transition-timing-function: ease;
  161.             -moz-transition-timing-function: ease;
  162.             -webkit-transition-timing-function: ease;
  163.             -o-transition-timing-function: ease;
  164.             transition-duration: 1s;
  165.         }
  166.         #love_left {
  167.             transform-origin: 870px 780px;
  168.         }
  169.         #love_right {
  170.             transform-origin: 870px 730px;
  171.         }
  172.         .text_ta {
  173.             opacity: 0;
  174.             position: relative;
  175.             -webkit-background-clip: text;
  176.             color: transparent;
  177.             font-size: 100px;
  178.             transition-property: top, left, opacity;
  179.             transition-timing-function: ease;
  180.             -moz-transition-timing-function: ease;
  181.             -webkit-transition-timing-function: ease;
  182.             -o-transition-timing-function: ease;
  183.             transition-duration: 2s;
  184.         }
  185.         .arrow {
  186.             width: 222px;
  187.             height: 110px;
  188.             position: absolute;
  189.             top: -300px;
  190.             left: 770px;
  191.             transform: rotateZ(0deg);
  192.             transition-property: top, left, transform;
  193.             transition-duration: 1s;
  194.         }
  195.         .bloods {
  196.             position: absolute;
  197.             left: 34px;
  198.             top: 96px;
  199.             width: 32px;
  200.             height: 32px;
  201.             border-radius: 8px 42px 24px 42px;
  202.             background-color: #d30;
  203.             transform: rotate(45deg);
  204.             transition: top 3s;
  205.         }
  206.     </style>
  207. </head>
  208. <body>
  209. <div class="stars" id="stars"></div>
  210. <script>
  211.     let arr = ['one', 'two', 'three', 'four', 'five', 'six', 'seven']
  212.     let love_2 = {
  213.         one: [[], []],
  214.         two: [[], []],
  215.         three: [[], []],
  216.         four: [[], []],
  217.         five: [[], []],
  218.         six: [[], []],
  219.         seven: [[], []],
  220.     }
  221.     let love = {
  222.         one: [
  223.             [482, 482, 463, 463, 446, 446, 434, 434, 425, 425, 423, 423, 426, 426, 434, 434, 446, 446, 461, 461, 479, 479, 499, 499, 521, 521, 542, 542, 562, 562, 583, 583, 603, 603, 623, 623, 639, 639, 655, 655, 671, 671, 685, 685, 701, 701, 714, 714, 728, 728, 744, 744, 758, 758, 773, 773, 785],
  224.             [1366, 1388, 1353, 1401, 1337, 1417, 1318, 1436, 1296, 1458, 1274, 1482, 1252, 1504, 1231, 1526, 1213, 1544, 1198, 1559, 1187, 1568, 1180, 1575, 1177, 1578, 1178, 1577, 1180, 1575, 1184, 1571, 1192, 1563, 1202, 1553, 1215, 1540, 1230, 1525, 1246, 1509, 1262, 1493, 1279, 1476, 1295, 1460, 1312, 1443, 1328, 1427, 1345, 1410, 1361, 1394, 1378]
  225.         ],
  226.         two: [
  227.             [501, 501, 489, 489, 471, 471, 456, 456, 445, 445, 444, 444, 447, 447, 455, 455, 468, 468, 486, 486, 507, 507, 527, 527, 546, 546, 566, 566, 586, 586, 605, 605, 622, 622, 638, 638, 653, 653, 667, 667, 681, 681, 694, 694, 708, 708, 724, 724, 737, 737, 752, 752],
  228.             [1366, 1388, 1346, 1408, 1333, 1421, 1317, 1437, 1299, 1455, 1278, 1476, 1257, 1497, 1237, 1517, 1221, 1533, 1208, 1546, 1201, 1553, 1200, 1554, 1200, 1554, 1202, 1552, 1206, 1548, 1215, 1539, 1228, 1526, 1242, 1512, 1258, 1496, 1272, 1482, 1287, 1467, 1304, 1450, 1320, 1434, 1335, 1419, 1352, 1402, 1367, 1388]
  229.         ],
  230.         three: [
  231.             [520, 520, 510, 510, 498, 498, 481, 481, 465, 465, 464, 464, 467, 467, 480, 480, 497, 497, 518, 518, 538, 538, 557, 557, 578, 578, 598, 598, 614, 614, 631, 631, 645, 645, 660, 660, 673, 673, 688, 688, 703, 703, 716, 716, 733],
  232.             [1366, 1388, 1346, 1408, 1327, 1427, 1314, 1440, 1299, 1455, 1277, 1477, 1256, 1498, 1239, 1515, 1226, 1528, 1219, 1535, 1220, 1534, 1221, 1533, 1226, 1528, 1235, 1522, 1249, 1508, 1262, 1495, 1278, 1479, 1294, 1463, 1311, 1446, 1326, 1431, 1341, 1416, 1358, 1399, 1378]
  233.         ],
  234.         four: [
  235.             [539, 539, 530, 530, 518, 518, 507, 507, 490, 490, 485, 485, 496, 496, 514, 514, 534, 534, 554, 554, 574, 574, 593, 593, 610, 610, 625, 625, 639, 639, 652, 652, 668, 668, 683, 683, 696, 696, 714],
  236.             [1366, 1388, 1346, 1408, 1327, 1427, 1307, 1447, 1294, 1460, 1272, 1482, 1254, 1500, 1241, 1513, 1241, 1513, 1242, 1512, 1247, 1507, 1259, 1495, 1271, 1483, 1286, 1468, 1303, 1451, 1321, 1433, 1335, 1419, 1350, 1404, 1366, 1388, 1379]
  237.         ],
  238.         five: [
  239.             [559, 559, 550, 550, 539, 539, 530, 530, 514, 514, 516, 516, 538, 538, 558, 558, 578, 578, 597, 597, 613, 613, 627, 627, 639, 639, 655, 655, 672, 672],
  240.             [1366, 1388, 1344, 1410, 1324, 1430, 1304, 1450, 1286, 1468, 1265, 1489, 1262, 1493, 1263, 1492, 1275, 1480, 1287, 1468, 1304, 1451, 1321, 1434, 1339, 1416, 1352, 1400, 1366, 1387]
  241.         ],
  242.         six: [
  243.             [580, 580, 570, 570, 560, 560, 550, 550, 536, 536, 556, 556, 576, 576, 592, 592, 606, 606, 619, 619, 634, 634, 650],
  244.             [1366, 1388, 1345, 1409, 1325, 1429, 1305, 1449, 1284, 1470, 1285, 1469, 1296, 1458, 1312, 1442, 1328, 1426, 1346, 1408, 1361, 1393, 1377]
  245.         ],
  246.         seven: [
  247.             [603, 603, 592, 592, 578, 578, 621],
  248.             [1367, 1389, 1346, 1408, 1324, 1428, 1376]
  249.         ]
  250.     }
  251.     function stars() {
  252.         let boxShadow = "";
  253.         for (let i = 0; i < 2000; i++) {
  254.             boxShadow += parseInt(1000 - (Math.random() * 2000)) + "px " + parseInt(1000 - (Math.random() * 2000)) + "px #" + Math.random().toString(16).substr(-6) + ",";
  255.         }
  256.         boxShadow = boxShadow.replace(/,$/gi, "");
  257.         document.getElementById("stars").style.boxShadow = boxShadow;
  258.         setTimeout(function () {
  259.             stars()
  260.         }, 6000)
  261.     }
  262.     window.onload = function () {
  263.         stars()
  264.         for (const value of arr) {
  265.             for (let i = 0; i < love[value][0].length; i++) {
  266.                 love_2[value][0][i] = love[value][0][i] - 360
  267.                 love_2[value][1][i] = love[value][1][i] - 1166
  268.             }
  269.         }
  270.         document.getElementsByTagName('body')[0].innerHTML += '<div id="box" class="box"><div style="opacity:0" class="ta" id="ta"></div><div class="me" id="me"></div></div>'
  271.         let object = new Class()
  272.         object.start()
  273.     }
  274.     let arrow = {
  275.         top: [0, 16, 38, 62, 80, 38, 38, 38, 38, 38, 38, 38, 38, 38, 0, 14, 62, 80],
  276.         left: [0, 15, 31, 15, 0, 50, 69, 88, 107, 126, 145, 164, 183, 202, 171, 189, 189, 171],
  277.         rotate: [300, 300, 270, 225, 225, 270, 270, 270, 270, 270, 270, 270, 270, 270, 300, 300, 225, 225]
  278.     }
  279.     class Class {
  280.         async start() {
  281.             await this.showTA()
  282.             await this.show_me()
  283.             await this.discolor_me()
  284.             await this.show_ta_one()
  285.             await this.change_me_color()
  286.             await this.heart()
  287.             await this.show_ta_all()
  288.             await this.near()
  289.             await this.rotate()
  290.             await this.separate()
  291.             await this.arrow()
  292.             await this.heartBroken_()
  293.             await this.drippingBlood()
  294.             await this.ta_disappear()
  295.             await this.broken()
  296.             this.end()
  297.         }
  298.         showTA() {
  299.             let that = this
  300.             return new Promise(function (resolve) {
  301.                 let width = document.documentElement.clientWidth
  302.                 let height = document.documentElement.clientHeight
  303.                 let backgroundImage = ""
  304.                 for (let i = 0; i < 10; i++) {
  305.                     backgroundImage += "#" + Math.random().toString(16).substr(-6) + ","
  306.                 }
  307.                 backgroundImage = backgroundImage.replace(/,$/gi, ');"');
  308.                 let style = '"text-fill-color:transparent;background-clip:text;background-size:200% 100%;left:' + (width / 2 - 50) + 'px;top:' + (height / 2 - 50) + 'px;background-image: linear-gradient(to right,' + backgroundImage
  309.                 document.getElementsByTagName('body')[0].innerHTML += '<p id="text_ta" class="text_ta" style=' + style + '>我喜欢你，（名字）</p>'
  310.                 let element = document.getElementById('text_ta')
  311.                 setTimeout(function () {
  312.                     element.style.opacity = '1'
  313.                 },500)
  314.                 setTimeout(function () {
  315.                     element.style.top = "180px"
  316.                     element.style.left = "165px"
  317.                     element.style.animation = "animationColor 5s infinite linear"
  318.                     setTimeout(function () {
  319.                         resolve("showTA")
  320.                     }, 2500)
  321.                 }, 2800)
  322.                 that.text_ta_backgroundImage_interval = setInterval(function () {
  323.                     let backgroundImage = ""
  324.                     for (let i = 0; i < 10; i++) {
  325.                         backgroundImage += "#" + Math.random().toString(16).substr(-6) + ","
  326.                     }
  327.                     backgroundImage = backgroundImage.replace(/,$/gi, ')');
  328.                     element.style.backgroundImage = 'linear-gradient(to right,' + backgroundImage
  329.                 }, 3000)
  330.             })
  331.         }
  332.         show_me() {
  333.             return new Promise(async function (resolve, reject) {
  334.                 document.getElementById("me").innerHTML += '<div id="love_left" class="broken"></div>'
  335.                 document.getElementById("me").innerHTML += '<div id="love_right" class="broken"></div>'
  336.                 let love_left = document.getElementById('love_left')
  337.                 let love_right = document.getElementById('love_right')
  338.                 let color = "#858585"
  339.                 for (const value of arr) {
  340.                     for (let i = 0; i < love[value][0].length; i++) {
  341.                         if (i % 2 === 0) {
  342.                             love_left.innerHTML += "<span id=" + value + "_" + i + " style='opacity:0;color:" + color + ";top:" + love[value][0][i] + "px;left:" + love[value][1][i] + "px;text-shadow:2px 2px 2px " + color + ";'>❤</span>"
  343.                         } else {
  344.                             love_right.innerHTML += "<span id=" + value + "_" + i + " style='opacity:0;color:" + color + ";top:" + love[value][0][i] + "px;left:" + love[value][1][i] + "px;text-shadow:2px 2px 2px " + color + ";'>❤</span>"
  345.                         }
  346.                     }
  347.                 }
  348.                 for (const value of arr) {
  349.                     for (let i = 0; i < love[value][0].length; i++) {
  350.                         await new Promise(function (resolve) {
  351.                             setTimeout(function () {
  352.                                 let element = document.getElementById(value + "_" + i)
  353.                                 element.style.opacity = "1"
  354.                                 resolve()
  355.                             }, 20)
  356.                         })
  357.                     }
  358.                 }
  359.                 resolve("show_me")
  360.             })
  361.         }
  362.         discolor_me() {
  363.             let interval = '';
  364.             let time = 800;
  365.             return new Promise(function (resolve) {
  366.                 interval = setInterval(discolor, time)
  367.  
  368.                 function discolor() {
  369.                     let element = "";
  370.                     for (const value of arr) {
  371.                         for (let i = 0; i < love[value][0].length; i++) {
  372.                             element = document.getElementById(value + "_" + i)
  373.                             element.style.color = "#" + Math.random().toString(16).substr(-6)
  374.                             element.style.textShadow = "2px 2px 2px #" + Math.random().toString(16).substr(-6)
  375.                         }
  376.                     }
  377.                     clearInterval(interval);
  378.                     if (time > 400) {
  379.                         time -= 80;
  380.                     } else if (time > 390) {
  381.                         time -= 1;
  382.                         resolve("discolor_me")
  383.                     }
  384.                     if (time > 390) {
  385.                         interval = setInterval(discolor, time);
  386.                     }
  387.                 }
  388.             })
  389.         }
  390.         show_ta_one() {
  391.             let that = this
  392.             return new Promise(function (resolve) {
  393.                 let i = 0;
  394.                 let text_ta = document.getElementById('text_ta')
  395.                 text_ta.style.transitionDuration = "4s"
  396.                 text_ta.style.opacity = "0"
  397.                 clearInterval(that.text_ta_backgroundImage_interval)
  398.                 setTimeout(function () {
  399.                     document.getElementById("text_ta").remove()
  400.                 }, 5000)
  401.                 document.getElementById("box").innerHTML += '<div id="temp_ta" class="temp_ta"></div>'
  402.                 let element = document.getElementById('temp_ta')
  403.                 let interval = setInterval(function () {
  404.                     element.innerHTML += "<span id=temp_" + i + " style='z-index:-1;opacity:1;:#858585;top:" + love_2.one[0][i] + "px;left:" + love_2.one[1][i] + "px;text-shadow:2px 2px 2px #858585;'>❤</span>"
  405.                     i++
  406.                     if (i === love_2.one[0].length) {
  407.                         clearInterval(interval)
  408.                         setTimeout(function () {
  409.                             resolve("show_ta_one")
  410.                         }, 500)
  411.                     }
  412.                 }, 50)
  413.             })
  414.         }
  415.         change_me_color() {
  416.             let that = this
  417.             return new Promise(async function (resolve) {
  418.                 document.getElementById("me").innerHTML += '<div style="opacity:0;" id="temp_me" class="temp_me"></div>'
  419.                 let element = document.getElementById("temp_me")
  420.                 for (const value of arr) {
  421.                     for (let i = 0; i < love[value][0].length; i++) {
  422.                         element.innerHTML += "<span id=temp_" + value + "_" + i + " style='color:#EB098E;top:" + love[value][0][i] + "px;left:" + love[value][1][i] + "px;text-shadow:2px 2px 2px #FDB0DA;'>❤</span>"
  423.                     }
  424.                 }
  425.                 setTimeout(function () {
  426.                     element.style.animation = "show_temp_me 5s"
  427.                     setTimeout(function () {
  428.                         for (const value of arr) {
  429.                             for (let i = 0; i < love[value][0].length; i++) {
  430.                                 let element = document.getElementById(value + "_" + i)
  431.                                 element.style.color = "#EB098E"
  432.                                 element.style.textShadow = "2px 2px 2px #FDB0DA"
  433.                             }
  434.                         }
  435.                         setTimeout(function () {
  436.                             document.getElementById("temp_me").remove()
  437.                         }, 6000)
  438.                     }, 4000)
  439.                     resolve("change_me_color")
  440.                 }, 500)
  441.             })
  442.         }
  443.         heart() {
  444.             return new Promise(function (resolve) {
  445.                 document.getElementById('me').innerHTML += '<p data-text="❤" id="heart" class="heart">❤</p>'
  446.                 let heart = document.getElementById("heart")
  447.                 setTimeout(function () {
  448.                     heart.style.opacity = "1"
  449.                     heart.style.zIndex = "3"
  450.                 }, 20)
  451.                 setTimeout(function () {
  452.                     heart.style.animation = "beat 1s linear infinite"
  453.                     setTimeout(function () {
  454.                         resolve("heart")
  455.                     }, 500)
  456.                 }, 4500)
  457.             })
  458.         }
  459.         show_ta_all() {
  460.             return new Promise(function (resolve) {
  461.                 let element = document.getElementById("ta")
  462.                 for (const value of arr) {
  463.                     for (let i = 0; i < love_2[value][0].length; i++) {
  464.                         element.innerHTML += "<span id=" + value + "_" + i + " style='color:#FDB0DA;top:" + love_2[value][0][i] + "px;left:" + love_2[value][1][i] + "px;text-shadow:2px 2px 2px #EB098E;'>❤</span>"
  465.                     }
  466.                 }
  467.                 setTimeout(function () {
  468.                     element.style.opacity = "1"
  469.                     setTimeout(function () {
  470.                         document.getElementById("temp_ta").remove()
  471.                         resolve("show_ta_all")
  472.                     }, 3500)
  473.                 }, 500)
  474.             })
  475.         }
  476.         near() {
  477.             return new Promise(function (resolve) {
  478.                 let me = document.getElementById("me");
  479.                 let ta = document.getElementById("ta");
  480.                 me.style.top = "0";
  481.                 me.style.left = "0";
  482.                 ta.style.top = "0";
  483.                 ta.style.left = "0";
  484.                 setTimeout(function () {
  485.                     me.style.top = "-132px";
  486.                     me.style.left = "-364px";
  487.                     ta.style.top = "230px";
  488.                     ta.style.left = "600px";
  489.                     setTimeout(function () {
  490.                         resolve("near");
  491.                     }, 4000)
  492.                 }, 100)
  493.             })
  494.         }
  495.         rotate() {
  496.             return new Promise(function (resolve) {
  497.                 document.getElementById("box").style.transform = "rotate3d(1,1,1,360deg)";
  498.                 setTimeout(function () {
  499.                     resolve("rotate")
  500.                 }, 6500)
  501.             })
  502.         }
  503.         separate() {
  504.             return new Promise(function (resolve) {
  505.                 let ta = document.getElementById("ta")
  506.                 ta.style.top = "0"
  507.                 ta.style.left = "0"
  508.                 setTimeout(function () {
  509.                     resolve()
  510.                 }, 3500)
  511.             })
  512.         }
  513.         arrow() {
  514.             return new Promise(function (resolve) {
  515.                 let me = document.getElementById("me")
  516.                 me.innerHTML += '<div class="arrow" id="arrow"></div>'
  517.                 let element = document.getElementById("arrow");
  518.                 for (let i = 0; i < 18; i++) {
  519.                     let style = "'z-index:2;color:#fe0;top:" + arrow.top[i] + "px;left:" + arrow.left[i] + "px;transform: rotate(" + arrow.rotate[i] + "deg)'"
  520.                     element.innerHTML += '<span id="arrow_' + i + '" style=' + style + '>❤</span>'
  521.                 }
  522.                 setTimeout(function () {
  523.                     element.style.top = parseInt(Math.random() * (400 - 100) + 100) + "px";
  524.                 }, 1000)
  525.                 setTimeout(function () {
  526.                     let heart = document.getElementById("heart")
  527.                     let heart_center_x = Math.floor(heart.getBoundingClientRect().left) + Math.floor(heart.getBoundingClientRect().width / 2)
  528.                     let heart_center_y = Math.floor(heart.getBoundingClientRect().top) + Math.floor(heart.getBoundingClientRect().height / 2)
  529.                     let arrow = document.getElementById("arrow")
  530.                     let rotate = 360 * Math.atan((arrow.getBoundingClientRect().y - heart.getBoundingClientRect().y) / (arrow.getBoundingClientRect().x - heart.getBoundingClientRect().x)) / (2 * Math.PI);
  531.                     element.style.transform = "rotate(" + rotate + "deg)"
  532.                     let x = heart_center_x + Math.abs(me.getBoundingClientRect().left) - (arrow.getBoundingClientRect().width / 2)
  533.                     let y = heart_center_y + Math.abs(me.getBoundingClientRect().top) - (arrow.getBoundingClientRect().height / 2)
  534.                     setTimeout(function () {
  535.                         element.style.top = y + 'px'
  536.                         element.style.left = x + 'px'
  537.                         setTimeout(function () {
  538.                             heart.style.animation = ""
  539.                             resolve()
  540.                         }, 2000)
  541.                     }, 2000)
  542.                 }, 3000)
  543.             })
  544.         }
  545.         heartBroken_() {
  546.             return new Promise(function (resolve) {
  547.                 let element = document.getElementById('heart')
  548.                 element.classList.add("heartBroken")
  549.                 setTimeout(function () {
  550.                     element.innerHTML = ''
  551.                     element.innerText = ''
  552.                     setTimeout(function () {
  553.                         document.getElementById('arrow').style.top = window.screen.height + 200 + "px"
  554.                         setTimeout(function () {
  555.                             resolve()
  556.                         }, 2000)
  557.                     }, 2000)
  558.                 }, 800)
  559.             })
  560.         }
  561.         drippingBlood() {
  562.             return new Promise(function (resolve) {
  563.                 let height = document.documentElement.clientHeight + 50
  564.                 let heart = document.getElementById("heart")
  565.                 heart.innerHTML += '<div id="blood"></div>'
  566.                 let blood = document.getElementById('blood')
  567.                 let i = 1;
  568.                 let stop = 10;
  569.                 let intervalID = setInterval(function () {
  570.                     if (i === 6){
  571.                         resolve()
  572.                     }
  573.                     if (i > stop) {
  574.                         clearInterval(intervalID)
  575.                         return
  576.                     }
  577.                     blood.innerHTML += "<p id='blood_" + i + "'class='bloods'></p>"
  578.                     start(i)
  579.                     i++
  580.                 }, 1000)
  581.                 function start(i){
  582.                     if(i === stop){
  583.                         setTimeout(function () {
  584.                             blood.innerHTML = ''
  585.                         },2100)
  586.                     }
  587.                     setTimeout(function () {
  588.                         document.getElementById("blood_" + i).style.top = height+"px"
  589.                     }, 50)
  590.                 }
  591.             })
  592.         }
  593.         ta_disappear(){
  594.             return new Promise(function (resolve){
  595.                 let ta = document.getElementById('ta');
  596.                 ta.style.top = "-300px"
  597.                 ta.style.left = "-200px"
  598.                 ta.style.opacity = '0'
  599.                 setTimeout(function () {
  600.                     document.getElementById("heart").style.opacity = '0'
  601.                     setTimeout(function () {
  602.                         resolve()
  603.                     },3500)
  604.                 },3000)
  605.             })
  606.         }
  607.         broken(){
  608.             return new Promise(function (resolve){
  609.                 let height = window.screen.height * 1.2
  610.                 let width = window.screen.width * 1.2
  611.                 let top = "";
  612.                 let left = "";
  613.                 let love_left = document.getElementById('love_left').childNodes;
  614.                 let love_right = document.getElementById('love_right').childNodes
  615.                 for (let i = 0; i < love_left.length; i++) {
  616.                     top = parseInt(Math.random() * (height - 1) + 1)
  617.                     left = parseInt(Math.random() * (width - 1) + 1)
  618.                     love_left[i].style.transitionDuration = '3s';
  619.                     love_left[i].style.top = top + "px";
  620.                     love_left[i].style.left = left + "px";
  621.                     love_left[i].style.transform = "rotate("+(Math.random() * (360 - 1) + 1)+"deg)"
  622.                 }
  623.                 for (let i = 0; i < love_right.length; i++) {
  624.                     top = parseInt(Math.random() * (height - 1) + 1)
  625.                     left = parseInt(Math.random() * (width - 1) + 1)
  626.                     love_right[i].style.transitionDuration = '3s';
  627.                     love_right[i].style.top = top + "px";
  628.                     love_right[i].style.left = left + "px";
  629.                     love_right[i].style.transform = "rotate("+(Math.random() * (360 - 1) + 1)+"deg)"
  630.                 }
  631.                 setTimeout(function () {
  632.                     resolve()
  633.                 },3500)
  634.             })
  635.         }
  636.         end(){
  637.             document.getElementById('me').style.opacity = '0'
  638.             setTimeout(function () {
  639.                 let body = document.getElementsByTagName('body');
  640.                 body.removeChild(document.getElementById('box'));
  641.             },5000)
  642.         }
  643.     }
  644. </script>
  645. </body>
  646. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/120639?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号