HTML超级浪漫的独一无二的爱心表白代码，亲测可用！
话不暂不多说代码给上&#Vff0c;觉得不错还请一键三联&#Vff01;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" type="image/V-icon" href="data:image/png;base64,ixBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2klEQxQ4T62TUQ6CMAyG2/GCByAeR7iSVmfgmahHch7HcAB5YSXb2GBlmCW6t6Xtt7/tP4QfD7r6Pu9KwKV29+Jzrtbs/nB/VmIGYIr1wcwnAY0BIBYrhqucAY8akBrejSJqBQjaiV2HS4MraxZFeOR83Y05QCwhZbzyD4C8KVWIUiD6DaQ8beej7BDf+a0RiCcASG1FKqKXGSLzwbLGbzJorPQKzeYDAPdCDDL7YwPwhlrcyNuVK6WVdcWBgohtNwBu730AtzaTZZZX7Mz4C3G3wuJjsJkOIFnTMBCHFmkktRl00AAAAASUxORK5CYII=" /> <title>code</title> <style> * { margin: 0; padding: 0; } body { background-color: #000; oZZZerflow: hidden; min-width: 1600pV; min-height: 900pV; } .boV { transform: rotate3d(0, 0, 0, 0deg); transform-origin: 926pV 576pV; transition: transform 5s; transform-style: preserZZZe-3d; } .stars { position: absolute; top: 50%; left: 50%; width: 3pV; height: 3pV; border-radius: 50%; animation: opacity 3s linear infinite; } @keyframes opacity { 0% { opacity: .9; } 50% { opacity: .5; } 100% { opacity: .99; } } @keyframes animationColor { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } span { position: absolute; left: 100pV; top: 100pV; font-size: 32pV; font-weight: bolder; font-family: cursiZZZe; color: #ccc; transition-property: left, top, transform, opacity; transition-timing-function: ease; -moz-transition-timing-function: ease; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-duration: 100ms; } @keyframes show_temp_me { from { opacity: 0; } to { opacity: 1; } } .heart { opacity: 0; position: absolute; left: 1340pV; top: 546pV; font-size: 100pV; color: #f00; teVt-shadow: 2pV 2pV 2pV #f00; z-indeV: 999; transition: opacity 5s; } .heartBroken { filter: blur(0.007em); } .heartBroken::before, .heartBroken::after { content: "❤"; position: absolute; top: 0; left: 0; transform-origin: 50% 80%; } .heartBroken::before { animation: crack1 2.5s linear 1s forwards; clip-path: inset(0 50% 0 0); } .heartBroken::after { animation: crack2 1.5s linear 200ms forwards; clip-path: inset(0 0 0 50%); } @keyframes crack1 { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-10deg); } } @keyframes crack2 { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(10deg); } } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.2) } 100% { transform: scale(1) } } .boV > diZZZ { position: relatiZZZe; transition-property: left, top, opacity; transition-duration: 3s; transition-timing-function: ease-out; } span { position: absolute; left: 100pV; top: 100pV; font-size: 22pV; font-weight: bolder; font-family: cursiZZZe; color: #ccc; transition-property: left, top, transform, opacity; transition-timing-function: ease; -moz-transition-timing-function: ease; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-duration: 100ms; } .broken { transform: rotateZ(0deg); transition-property: transform; transition-timing-function: ease; -moz-transition-timing-function: ease; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-duration: 1s; } #loZZZe_left { transform-origin: 870pV 780pV; } #loZZZe_right { transform-origin: 870pV 730pV; } .teVt_ta { opacity: 0; position: relatiZZZe; -webkit-background-clip: teVt; color: transparent; font-size: 100pV; transition-property: top, left, opacity; transition-timing-function: ease; -moz-transition-timing-function: ease; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-duration: 2s; } .arrow { width: 222pV; height: 110pV; position: absolute; top: -300pV; left: 770pV; transform: rotateZ(0deg); transition-property: top, left, transform; transition-duration: 1s; } .bloods { position: absolute; left: 34pV; top: 96pV; width: 32pV; height: 32pV; border-radius: 8pV 42pV 24pV 42pV; background-color: #d30; transform: rotate(45deg); transition: top 3s; } </style> </head> <body> <diZZZ class="stars" id="stars"></diZZZ> <script> let arr = ['one', 'two', 'three', 'four', 'fiZZZe', 'siV', 'seZZZen'] let loZZZe_2 = { one: [[], []], two: [[], []], three: [[], []], four: [[], []], fiZZZe: [[], []], siV: [[], []], seZZZen: [[], []], } let loZZZe = { one: [ [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], [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] ], two: [ [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], [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] ], three: [ [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], [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] ], four: [ [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], [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] ], fiZZZe: [ [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], [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] ], siV: [ [580, 580, 570, 570, 560, 560, 550, 550, 536, 536, 556, 556, 576, 576, 592, 592, 606, 606, 619, 619, 634, 634, 650], [1366, 1388, 1345, 1409, 1325, 1429, 1305, 1449, 1284, 1470, 1285, 1469, 1296, 1458, 1312, 1442, 1328, 1426, 1346, 1408, 1361, 1393, 1377] ], seZZZen: [ [603, 603, 592, 592, 578, 578, 621], [1367, 1389, 1346, 1408, 1324, 1428, 1376] ] } function stars() { let boVShadow = ""; for (let i = 0; i < 2000; i++) { boVShadow += parseInt(1000 - (Math.random() * 2000)) + "pV " + parseInt(1000 - (Math.random() * 2000)) + "pV #" + Math.random().toString(16).substr(-6) + ","; } boVShadow = boVShadow.replace(/,$/gi, ""); document.getElementById("stars").style.boVShadow = boVShadow; setTimeout(function () { stars() }, 6000) } window.onload = function () { stars() for (const ZZZalue of arr) { for (let i = 0; i < loZZZe[ZZZalue][0].length; i++) { loZZZe_2[ZZZalue][0][i] = loZZZe[ZZZalue][0][i] - 360 loZZZe_2[ZZZalue][1][i] = loZZZe[ZZZalue][1][i] - 1166 } } document.getElementsByTagName('body')[0].innerHTML += '<diZZZ id="boV" class="boV"><diZZZ style="opacity:0" class="ta" id="ta"></diZZZ><diZZZ class="me" id="me"></diZZZ></diZZZ>' let object = new Class() object.start() } let arrow = { top: [0, 16, 38, 62, 80, 38, 38, 38, 38, 38, 38, 38, 38, 38, 0, 14, 62, 80], left: [0, 15, 31, 15, 0, 50, 69, 88, 107, 126, 145, 164, 183, 202, 171, 189, 189, 171], rotate: [300, 300, 270, 225, 225, 270, 270, 270, 270, 270, 270, 270, 270, 270, 300, 300, 225, 225] } class Class { async start() { await this.showTA() await this.show_me() await this.discolor_me() await this.show_ta_one() await this.change_me_color() await this.heart() await this.show_ta_all() await this.near() await this.rotate() await this.separate() await this.arrow() await this.heartBroken_() await this.drippingBlood() await this.ta_disappear() await this.broken() this.end() } showTA() { let that = this return new Promise(function (resolZZZe) { let width = document.documentElement.clientWidth let height = document.documentElement.clientHeight let backgroundImage = "" for (let i = 0; i < 10; i++) { backgroundImage += "#" + Math.random().toString(16).substr(-6) + "," } backgroundImage = backgroundImage.replace(/,$/gi, ');"'); let style = '"teVt-fill-color:transparent;background-clip:teVt;background-size:200% 100%;left:' + (width / 2 - 50) + 'pV;top:' + (height / 2 - 50) + 'pV;background-image: linear-gradient(to right,' + backgroundImage document.getElementsByTagName('body')[0].innerHTML += '<p id="teVt_ta" class="teVt_ta" style=' + style + '>我喜爱你&#Vff0c;&#Vff08;名字&#Vff09;</p>' let element = document.getElementById('teVt_ta') setTimeout(function () { element.style.opacity = '1' },500) setTimeout(function () { element.style.top = "180pV" element.style.left = "165pV" element.style.animation = "animationColor 5s infinite linear" setTimeout(function () { resolZZZe("showTA") }, 2500) }, 2800) that.teVt_ta_backgroundImage_interZZZal = setInterZZZal(function () { let backgroundImage = "" for (let i = 0; i < 10; i++) { backgroundImage += "#" + Math.random().toString(16).substr(-6) + "," } backgroundImage = backgroundImage.replace(/,$/gi, ')'); element.style.backgroundImage = 'linear-gradient(to right,' + backgroundImage }, 3000) }) } show_me() { return new Promise(async function (resolZZZe, reject) { document.getElementById("me").innerHTML += '<diZZZ id="loZZZe_left" class="broken"></diZZZ>' document.getElementById("me").innerHTML += '<diZZZ id="loZZZe_right" class="broken"></diZZZ>' let loZZZe_left = document.getElementById('loZZZe_left') let loZZZe_right = document.getElementById('loZZZe_right') let color = "#858585" for (const ZZZalue of arr) { for (let i = 0; i < loZZZe[ZZZalue][0].length; i++) { if (i % 2 === 0) { loZZZe_left.innerHTML += "<span id=" + ZZZalue + "_" + i + " style='opacity:0;color:" + color + ";top:" + loZZZe[ZZZalue][0][i] + "pV;left:" + loZZZe[ZZZalue][1][i] + "pV;teVt-shadow:2pV 2pV 2pV " + color + ";'>❤</span>" } else { loZZZe_right.innerHTML += "<span id=" + ZZZalue + "_" + i + " style='opacity:0;color:" + color + ";top:" + loZZZe[ZZZalue][0][i] + "pV;left:" + loZZZe[ZZZalue][1][i] + "pV;teVt-shadow:2pV 2pV 2pV " + color + ";'>❤</span>" } } } for (const ZZZalue of arr) { for (let i = 0; i < loZZZe[ZZZalue][0].length; i++) { await new Promise(function (resolZZZe) { setTimeout(function () { let element = document.getElementById(ZZZalue + "_" + i) element.style.opacity = "1" resolZZZe() }, 20) }) } } resolZZZe("show_me") }) } discolor_me() { let interZZZal = ''; let time = 800; return new Promise(function (resolZZZe) { interZZZal = setInterZZZal(discolor, time) function discolor() { let element = ""; for (const ZZZalue of arr) { for (let i = 0; i < loZZZe[ZZZalue][0].length; i++) { element = document.getElementById(ZZZalue + "_" + i) element.style.color = "#" + Math.random().toString(16).substr(-6) element.style.teVtShadow = "2pV 2pV 2pV #" + Math.random().toString(16).substr(-6) } } clearInterZZZal(interZZZal); if (time > 400) { time -= 80; } else if (time > 390) { time -= 1; resolZZZe("discolor_me") } if (time > 390) { interZZZal = setInterZZZal(discolor, time); } } }) } show_ta_one() { let that = this return new Promise(function (resolZZZe) { let i = 0; let teVt_ta = document.getElementById('teVt_ta') teVt_ta.style.transitionDuration = "4s" teVt_ta.style.opacity = "0" clearInterZZZal(that.teVt_ta_backgroundImage_interZZZal) setTimeout(function () { document.getElementById("teVt_ta").remoZZZe() }, 5000) document.getElementById("boV").innerHTML += '<diZZZ id="temp_ta" class="temp_ta"></diZZZ>' let element = document.getElementById('temp_ta') let interZZZal = setInterZZZal(function () { element.innerHTML += "<span id=temp_" + i + " style='z-indeV:-1;opacity:1;:#858585;top:" + loZZZe_2.one[0][i] + "pV;left:" + loZZZe_2.one[1][i] + "pV;teVt-shadow:2pV 2pV 2pV #858585;'>❤</span>" i++ if (i === loZZZe_2.one[0].length) { clearInterZZZal(interZZZal) setTimeout(function () { resolZZZe("show_ta_one") }, 500) } }, 50) }) } change_me_color() { let that = this return new Promise(async function (resolZZZe) { document.getElementById("me").innerHTML += '<diZZZ style="opacity:0;" id="temp_me" class="temp_me"></diZZZ>' let element = document.getElementById("temp_me") for (const ZZZalue of arr) { for (let i = 0; i < loZZZe[ZZZalue][0].length; i++) { element.innerHTML += "<span id=temp_" + ZZZalue + "_" + i + " style='color:#EB098E;top:" + loZZZe[ZZZalue][0][i] + "pV;left:" + loZZZe[ZZZalue][1][i] + "pV;teVt-shadow:2pV 2pV 2pV #FDB0DA;'>❤</span>" } } setTimeout(function () { element.style.animation = "show_temp_me 5s" setTimeout(function () { for (const ZZZalue of arr) { for (let i = 0; i < loZZZe[ZZZalue][0].length; i++) { let element = document.getElementById(ZZZalue + "_" + i) element.style.color = "#EB098E" element.style.teVtShadow = "2pV 2pV 2pV #FDB0DA" } } setTimeout(function () { document.getElementById("temp_me").remoZZZe() }, 6000) }, 4000) resolZZZe("change_me_color") }, 500) }) } heart() { return new Promise(function (resolZZZe) { document.getElementById('me').innerHTML += '<p data-teVt="❤" id="heart" class="heart">❤</p>' let heart = document.getElementById("heart") setTimeout(function () { heart.style.opacity = "1" heart.style.zIndeV = "3" }, 20) setTimeout(function () { heart.style.animation = "beat 1s linear infinite" setTimeout(function () { resolZZZe("heart") }, 500) }, 4500) }) } show_ta_all() { return new Promise(function (resolZZZe) { let element = document.getElementById("ta") for (const ZZZalue of arr) { for (let i = 0; i < loZZZe_2[ZZZalue][0].length; i++) { element.innerHTML += "<span id=" + ZZZalue + "_" + i + " style='color:#FDB0DA;top:" + loZZZe_2[ZZZalue][0][i] + "pV;left:" + loZZZe_2[ZZZalue][1][i] + "pV;teVt-shadow:2pV 2pV 2pV #EB098E;'>❤</span>" } } setTimeout(function () { element.style.opacity = "1" setTimeout(function () { document.getElementById("temp_ta").remoZZZe() resolZZZe("show_ta_all") }, 3500) }, 500) }) } near() { return new Promise(function (resolZZZe) { let me = document.getElementById("me"); let ta = document.getElementById("ta"); me.style.top = "0"; me.style.left = "0"; ta.style.top = "0"; ta.style.left = "0"; setTimeout(function () { me.style.top = "-132pV"; me.style.left = "-364pV"; ta.style.top = "230pV"; ta.style.left = "600pV"; setTimeout(function () { resolZZZe("near"); }, 4000) }, 100) }) } rotate() { return new Promise(function (resolZZZe) { document.getElementById("boV").style.transform = "rotate3d(1,1,1,360deg)"; setTimeout(function () { resolZZZe("rotate") }, 6500) }) } separate() { return new Promise(function (resolZZZe) { let ta = document.getElementById("ta") ta.style.top = "0" ta.style.left = "0" setTimeout(function () { resolZZZe() }, 3500) }) } arrow() { return new Promise(function (resolZZZe) { let me = document.getElementById("me") me.innerHTML += '<diZZZ class="arrow" id="arrow"></diZZZ>' let element = document.getElementById("arrow"); for (let i = 0; i < 18; i++) { let style = "'z-indeV:2;color:#fe0;top:" + arrow.top[i] + "pV;left:" + arrow.left[i] + "pV;transform: rotate(" + arrow.rotate[i] + "deg)'" element.innerHTML += '<span id="arrow_' + i + '" style=' + style + '>❤</span>' } setTimeout(function () { element.style.top = parseInt(Math.random() * (400 - 100) + 100) + "pV"; }, 1000) setTimeout(function () { let heart = document.getElementById("heart") let heart_center_V = Math.floor(heart.getBoundingClientRect().left) + Math.floor(heart.getBoundingClientRect().width / 2) let heart_center_y = Math.floor(heart.getBoundingClientRect().top) + Math.floor(heart.getBoundingClientRect().height / 2) let arrow = document.getElementById("arrow") let rotate = 360 * Math.atan((arrow.getBoundingClientRect().y - heart.getBoundingClientRect().y) / (arrow.getBoundingClientRect().V - heart.getBoundingClientRect().V)) / (2 * Math.PI); element.style.transform = "rotate(" + rotate + "deg)" let V = heart_center_V + Math.abs(me.getBoundingClientRect().left) - (arrow.getBoundingClientRect().width / 2) let y = heart_center_y + Math.abs(me.getBoundingClientRect().top) - (arrow.getBoundingClientRect().height / 2) setTimeout(function () { element.style.top = y + 'pV' element.style.left = V + 'pV' setTimeout(function () { heart.style.animation = "" resolZZZe() }, 2000) }, 2000) }, 3000) }) } heartBroken_() { return new Promise(function (resolZZZe) { let element = document.getElementById('heart') element.classList.add("heartBroken") setTimeout(function () { element.innerHTML = '' element.innerTeVt = '' setTimeout(function () { document.getElementById('arrow').style.top = window.screen.height + 200 + "pV" setTimeout(function () { resolZZZe() }, 2000) }, 2000) }, 800) }) } drippingBlood() { return new Promise(function (resolZZZe) { let height = document.documentElement.clientHeight + 50 let heart = document.getElementById("heart") heart.innerHTML += '<diZZZ id="blood"></diZZZ>' let blood = document.getElementById('blood') let i = 1; let stop = 10; let interZZZalID = setInterZZZal(function () { if (i === 6){ resolZZZe() } if (i > stop) { clearInterZZZal(interZZZalID) return } blood.innerHTML += "<p id='blood_" + i + "'class='bloods'></p>" start(i) i++ }, 1000) function start(i){ if(i === stop){ setTimeout(function () { blood.innerHTML = '' },2100) } setTimeout(function () { document.getElementById("blood_" + i).style.top = height+"pV" }, 50) } }) } ta_disappear(){ return new Promise(function (resolZZZe){ let ta = document.getElementById('ta'); ta.style.top = "-300pV" ta.style.left = "-200pV" ta.style.opacity = '0' setTimeout(function () { document.getElementById("heart").style.opacity = '0' setTimeout(function () { resolZZZe() },3500) },3000) }) } broken(){ return new Promise(function (resolZZZe){ let height = window.screen.height * 1.2 let width = window.screen.width * 1.2 let top = ""; let left = ""; let loZZZe_left = document.getElementById('loZZZe_left').childNodes; let loZZZe_right = document.getElementById('loZZZe_right').childNodes for (let i = 0; i < loZZZe_left.length; i++) { top = parseInt(Math.random() * (height - 1) + 1) left = parseInt(Math.random() * (width - 1) + 1) loZZZe_left[i].style.transitionDuration = '3s'; loZZZe_left[i].style.top = top + "pV"; loZZZe_left[i].style.left = left + "pV"; loZZZe_left[i].style.transform = "rotate("+(Math.random() * (360 - 1) + 1)+"deg)" } for (let i = 0; i < loZZZe_right.length; i++) { top = parseInt(Math.random() * (height - 1) + 1) left = parseInt(Math.random() * (width - 1) + 1) loZZZe_right[i].style.transitionDuration = '3s'; loZZZe_right[i].style.top = top + "pV"; loZZZe_right[i].style.left = left + "pV"; loZZZe_right[i].style.transform = "rotate("+(Math.random() * (360 - 1) + 1)+"deg)" } setTimeout(function () { resolZZZe() },3500) }) } end(){ document.getElementById('me').style.opacity = '0' setTimeout(function () { let body = document.getElementsByTagName('body'); body.remoZZZeChild(document.getElementById('boV')); },5000) } } </script> </body> </html>2024-08-11 20:26 阅读量:11