自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

-+

上一步保存

weixin_42730613的博客

原创浪漫的html表白源代码

浪漫的html表白源代码

2022-10-03 17:44:11 9167 6

原创 10种自动音乐播放器代码

自动音乐播放器代码

2022-10-03 17:41:21 3636

原创用html代码画玫瑰花

用html代码画玫瑰花

2022-10-03 17:37:55 1304

原创 3d相册音乐弹幕

代码】3d相册音乐弹幕。

2022-08-09 16:30:57 140

原创 HTML——添加网页背景音乐

2、使用hidden="true"表示隐藏音乐播放按钮，相反使用hidden="false"表示开启音乐播放按钮。5、使用src=“”，即是在""内加入背景音乐的保存路径，如src=“web网页制作\03.mp3”。说明1、使用autostart=true，表示音乐在网页加载同时加载音乐，打开网页时音乐自动播放。4、使用loop="true"表示循环播放如仅想播放一次则为loop=“false”4、使用preload=“auto”，则音频在页面加载的同时进行加载，并预备播放。......

2022-07-29 18:17:09 9478

原创 3d相册音乐弹幕

<!DOCTYPE html><html>div> <marquee behavior="scroll" direction="left" scrollamount="10"><font color="red" size="20px" >天增岁月人增寿，春满人间福满门</font> </marquee> <marquee behavior="scroll" direction="left" scrol.

2022-07-28 18:32:10 133

转载 html字体

通常字体系列名称比如“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”指定的系列名称具体字体的名称，比如“times”、“courier”、“arial”。网页字体样式华文中宋STZhongsong。网页字体样式华文仿宋STFangsong。网页字体样式华文仿宋STFangsong。网页字体样式华文黑体STHeiti。网页字体样式华文楷体STKaiti。网页字体样式华文楷体STKaiti。...

2022-07-24 16:28:45 4537

转载罗盘时钟代码

代码】罗盘时钟代码。

2022-07-24 16:06:32 2627

转载换肤和动态换背景

代码】换肤和动态换背景。

2022-07-24 16:01:15 98

转载 3D表白动态相册-包含源码

代码】3D表白动态相册-包含源码。

2022-07-24 15:59:06 406

转载 3D照片旋转墙

代码】3D照片旋转墙。

2022-07-24 08:38:15 181

转载超火 3D 照片墙

代码】超火3D照片墙。

2022-07-24 08:35:42 118

原创【几个HTML5实现音频和视频嵌入和网页的背景】

【几个HTML5实现音频和视频嵌入和网页的背景】

2022-07-23 21:25:47 653

原创【HTML实现弹幕滚动效果和文字动态发光特效代码】

利用HTML实现弹幕滚动效果和文字动态发光特效代码

2022-07-23 21:11:43 6636

转载动效之文字滚动5个代码

动效之文字滚动

2022-07-23 20:53:34 3187

超级炫酷的3D旋转相册.txt

超级炫酷的3D旋转相册.txt

2022-08-10

Html实现“心形日出”.txt

Html实现“心形日出”.txt

2022-07-28

代码雨之html实现.txt

代码雨之html实现.txt

2022-07-28

动态“心形”---html，js，css实现.txt

动态“心形”---html，js，css实现.txt

2022-07-28

相册代码大全1.txt

相册代码大全1.txt

2022-07-24

tbslog.txt

tbslog.txt

2022-07-24

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

谢清林% 优快云认证博客专家优快云认证企业博客

码龄7年

IP 属地：广东省

IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）

8: 原创

32万+: 周排名

59万+: 总排名

4万+: 访问

: 等级

149: 积分

29: 粉丝

33: 获赞

7: 评论

160: 收藏

私信

关注

热门文章

最新评论

浪漫的html表白源代码
2301_76588883: \u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Clink rel=\"icon\" type=\"image/x-icon\" href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2klEQVQ4T62TUQ6CMAyG2/GCByAeR7iSxmfgmahHch7HcAB5YSXb2GBlmCW6t6Xtt7/tP4QfD7r6Pu9KwKx29+Jzrtbs/nB/xmIGYIr1wcwnAY0BIBYrhqucAY8akBrejSJqBQjaix2HS4MraVZFeOR83Y05QCwhZbzyD4C8KxWIUiD6DaQ8beej7BDf+a0RiCcASG1FKqKXGSLzwbLGbzJorPQKzeYDAPdCDDL7YwPwhlrcyNuxK6WxdcWBgohtNwBu730AtzaTvX7Mz4C3G3wuJjsJkOIFnTMBCHFmkktRl00AAAAASUVORK5CYII=\" />\n \u003Ctitle>code\u003C/title>\n \u003Cstyle>\n * {\n margin: 0;\n padding: 0;\n }\n body {\n background-color: #000;\n overflow: hidden;\n min-width: 1600px;\n min-height: 900px;\n }\n .box {\n transform: rotate3d(0, 0, 0, 0deg);\n transform-origin: 926px 576px;\n transition: transform 5s;\n transform-style: preserve-3d;\n }\n .stars {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n animation: opacity 3s linear infinite;\n }\n @keyframes opacity {\n 0% {\n opacity: .9;\n }\n 50% {\n opacity: .5;\n }\n 100% {\n opacity: .99;\n }\n }\n @keyframes animationColor {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -100% 0;\n }\n }\n span {\n position: absolute;\n left: 100px;\n top: 100px;\n font-size: 32px;\n font-weight: bolder;\n font-family: cursive;\n color: #ccc;\n transition-property: left, top, transform, opacity;\n transition-timing-function: ease;\n -moz-transition-timing-function: ease;\n -webkit-transition-timing-function: ease;\n -o-transition-timing-function: ease;\n transition-duration: 100ms;\n }\n @keyframes show_temp_me {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .heart {\n opacity: 0;\n position: absolute;\n left: 1340px;\n top: 546px;\n font-size: 100px;\n color: #f00;\n text-shadow: 2px 2px 2px #f00;\n z-index: 999;\n transition: opacity 5s;\n }\n .heartBroken {\n filter: blur(0.007em);\n }\n .heartBroken::before,\n .heartBroken::after {\n content: \"❤\";\n position: absolute;\n top: 0;\n left: 0;\n transform-origin: 50% 80%;\n }\n .heartBroken::before {\n animation: crack1 2.5s linear 1s forwards;\n clip-path: inset(0 50% 0 0);\n }\n\n .heartBroken::after {\n animation: crack2 1.5s linear 200ms forwards;\n clip-path: inset(0 0 0 50%);\n }\n @keyframes crack1 {\n 0% {\n transform: rotateZ(0deg);\n }\n\n 100% {\n\n transform: rotateZ(-10deg);\n }\n }\n @keyframes crack2 {\n 0% {\n transform: rotateZ(0deg);\n }\n\n 100% {\n transform: rotateZ(10deg);\n }\n }\n @keyframes beat {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.2)\n }\n 100% {\n transform: scale(1)\n }\n }\n .box > div {\n position: relative;\n transition-property: left, top, opacity;\n transition-duration: 3s;\n transition-timing-function: ease-out;\n }\n span {\n position: absolute;\n left: 100px;\n top: 100px;\n font-size: 22px;\n font-weight: bolder;\n font-family: cursive;\n color: #ccc;\n transition-property: left, top, transform, opacity;\n transition-timing-function: ease;\n -moz-transition-timing-function: ease;\n -webkit-transition-timing-function: ease;\n -o-transition-timing-function: ease;\n transition-duration: 100ms;\n }\n .broken {\n transform: rotateZ(0deg);\n transition-property: transform;\n transition-timing-function: ease;\n -moz-transition-timing-function: ease;\n -webkit-transition-timing-function: ease;\n -o-transition-timing-function: ease;\n transition-duration: 1s;\n }\n #love_left {\n transform-origin: 870px 780px;\n }\n #love_right {\n transform-origin: 870px 730px;\n }\n .text_ta {\n opacity: 0;\n position: relative;\n -webkit-background-clip: text;\n color: transparent;\n font-size: 100px;\n transition-property: top, left, opacity;\n transition-timing-function: ease;\n -moz-transition-timing-function: ease;\n -webkit-transition-timing-function: ease;\n -o-transition-timing-function: ease;\n transition-duration: 2s;\n }\n .arrow {\n width: 222px;\n height: 110px;\n position: absolute;\n top: -300px;\n left: 770px;\n transform: rotateZ(0deg);\n transition-property: top, left, transform;\n transition-duration: 1s;\n }\n .bloods {\n position: absolute;\n left: 34px;\n top: 96px;\n width: 32px;\n height: 32px;\n border-radius: 8px 42px 24px 42px;\n background-color: #d30;\n transform: rotate(45deg);\n transition: top 3s;\n }\n \u003C/style>\n\u003C/head>\n\u003Cbody>\n\u003Cdiv class=\"stars\" id=\"stars\">\u003C/div>\n\u003Cscript>\n let arr = ['one', 'two', 'three', 'four', 'five', 'six', 'seven']\n let love_2 = {\n one: [[], []],\n two: [[], []],\n three: [[], []],\n four: [[], []],\n five: [[], []],\n six: [[], []],\n seven: [[], []],\n }\n let love = {\n one: [\n [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],\n [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]\n ],\n two: [\n [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],\n [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]\n ],\n three: [\n [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],\n [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]\n ],\n four: [\n [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],\n [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]\n ],\n five: [\n [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],\n [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]\n ],\n six: [\n [580, 580, 570, 570, 560, 560, 550, 550, 536, 536, 556, 556, 576, 576, 592, 592, 606, 606, 619, 619, 634, 634, 650],\n [1366, 1388, 1345, 1409, 1325, 1429, 1305, 1449, 1284, 1470, 1285, 1469, 1296, 1458, 1312, 1442, 1328, 1426, 1346, 1408, 1361, 1393, 1377]\n ],\n seven: [\n [603, 603, 592, 592, 578, 578, 621],\n [1367, 1389, 1346, 1408, 1324, 1428, 1376]\n ]\n }\n function stars() {\n let boxShadow = \"\";\n for (let i = 0; i \u003C 2000; i++) {\n boxShadow += parseInt(1000 - (Math.random() * 2000)) + \"px \" + parseInt(1000 - (Math.random() * 2000)) + \"px #\" + Math.random().toString(16).substr(-6) + \",\";\n }\n boxShadow = boxShadow.replace(/,$/gi, \"\");\n document.getElementById(\"stars\").style.boxShadow = boxShadow;\n setTimeout(function () {\n stars()\n }, 6000)\n }\n window.onload = function () {\n stars()\n for (const value of arr) {\n for (let i = 0; i \u003C love[value][0].length; i++) {\n love_2[value][0][i] = love[value][0][i] - 360\n love_2[value][1][i] = love[value][1][i] - 1166\n }\n }\n document.getElementsByTagName('body')[0].innerHTML += '\u003Cdiv id=\"box\" class=\"box\">\u003Cdiv style=\"opacity:0\" class=\"ta\" id=\"ta\">\u003C/div>\u003Cdiv class=\"me\" id=\"me\">\u003C/div>\u003C/div>'\n let object = new Class()\n object.start()\n }\n let arrow = {\n top: [0, 16, 38, 62, 80, 38, 38, 38, 38, 38, 38, 38, 38, 38, 0, 14, 62, 80],\n left: [0, 15, 31, 15, 0, 50, 69, 88, 107, 126, 145, 164, 183, 202, 171, 189, 189, 171],\n rotate: [300, 300, 270, 225, 225, 270, 270, 270, 270, 270, 270, 270, 270, 270, 300, 300, 225, 225]\n }\n class Class {\n async start() {\n await this.showTA()\n await this.show_me()\n await this.discolor_me()\n await this.show_ta_one()\n await this.change_me_color()\n await this.heart()\n await this.show_ta_all()\n await this.near()\n await this.rotate()\n await this.separate()\n await this.arrow()\n await this.heartBroken_()\n await this.drippingBlood()\n await this.ta_disappear()\n await this.broken()\n this.end()\n }\n showTA() {\n let that = this\n return new Promise(function (resolve) {\n let width = document.documentElement.clientWidth\n let height = document.documentElement.clientHeight\n let backgroundImage = \"\"\n for (let i = 0; i \u003C 10; i++) {\n backgroundImage += \"#\" + Math.random().toString(16).substr(-6) + \",\"\n }\n backgroundImage = backgroundImage.replace(/,$/gi, ');\"');\n 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\n document.getElementsByTagName('body')[0].innerHTML += '\u003Cp id=\"text_ta\" class=\"text_ta\" style=' + style + '>TA\u003C/p>'\n let element = document.getElementById('text_ta')\n setTimeout(function () {\n element.style.opacity = '1'\n },500)\n setTimeout(function () {\n element.style.top = \"180px\"\n element.style.left = \"165px\"\n element.style.animation = \"animationColor 5s infinite linear\"\n setTimeout(function () {\n resolve(\"showTA\")\n }, 2500)\n }, 2800)\n that.text_ta_backgroundImage_interval = setInterval(function () {\n let backgroundImage = \"\"\n for (let i = 0; i \u003C 10; i++) {\n backgroundImage += \"#\" + Math.random().toString(16).substr(-6) + \",\"\n }\n backgroundImage = backgroundImage.replace(/,$/gi, ')');\n element.style.backgroundImage = 'linear-gradient(to right,' + backgroundImage\n }, 3000)\n })\n }\n show_me() {\n return new Promise(async function (resolve, reject) {\n document.getElementById(\"me\").innerHTML += '\u003Cdiv id=\"love_left\" class=\"broken\">\u003C/div>'\n document.getElementById(\"me\").innerHTML += '\u003Cdiv id=\"love_right\" class=\"broken\">\u003C/div>'\n let love_left = document.getElementById('love_left')\n let love_right = document.getElementById('love_right')\n let color = \"#858585\"\n for (const value of arr) {\n for (let i = 0; i \u003C love[value][0].length; i++) {\n if (i % 2 === 0) {\n love_left.innerHTML += \"\u003Cspan 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 + \";'>❤\u003C/span>\"\n } else {\n love_right.innerHTML += \"\u003Cspan 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 + \";'>❤\u003C/span>\"\n }\n }\n }\n for (const value of arr) {\n for (let i = 0; i \u003C love[value][0].length; i++) {\n await new Promise(function (resolve) {\n setTimeout(function () {\n let element = document.getElementById(value + \"_\" + i)\n element.style.opacity = \"1\"\n resolve()\n }, 20)\n })\n }\n }\n resolve(\"show_me\")\n })\n }\n discolor_me() {\n let interval = '';\n let time = 800;\n return new Promise(function (resolve) {\n interval = setInterval(discolor, time)\n\n function discolor() {\n let element = \"\";\n for (const value of arr) {\n for (let i = 0; i \u003C love[value][0].length; i++) {\n element = document.getElementById(value + \"_\" + i)\n element.style.color = \"#\" + Math.random().toString(16).substr(-6)\n element.style.textShadow = \"2px 2px 2px #\" + Math.random().toString(16).substr(-6)\n }\n }\n clearInterval(interval);\n if (time > 400) {\n time -= 80;\n } else if (time > 390) {\n time -= 1;\n resolve(\"discolor_me\")\n }\n if (time > 390) {\n interval = setInterval(discolor, time);\n }\n }\n })\n }\n show_ta_one() {\n let that = this\n return new Promise(function (resolve) {\n let i = 0;\n let text_ta = document.getElementById('text_ta')\n text_ta.style.transitionDuration = \"4s\"\n text_ta.style.opacity = \"0\"\n clearInterval(that.text_ta_backgroundImage_interval)\n setTimeout(function () {\n document.getElementById(\"text_ta\").remove()\n }, 5000)\n document.getElementById(\"box\").innerHTML += '\u003Cdiv id=\"temp_ta\" class=\"temp_ta\">\u003C/div>'\n let element = document.getElementById('temp_ta')\n let interval = setInterval(function () {\n element.innerHTML += \"\u003Cspan 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;'>❤\u003C/span>\"\n i++\n if (i === love_2.one[0].length) {\n clearInterval(interval)\n setTimeout(function () {\n resolve(\"show_ta_one\")\n }, 500)\n }\n }, 50)\n })\n }\n change_me_color() {\n let that = this\n return new Promise(async function (resolve) {\n document.getElementById(\"me\").innerHTML += '\u003Cdiv style=\"opacity:0;\" id=\"temp_me\" class=\"temp_me\">\u003C/div>'\n let element = document.getElementById(\"temp_me\")\n for (const value of arr) {\n for (let i = 0; i \u003C love[value][0].length; i++) {\n element.innerHTML += \"\u003Cspan 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;'>❤\u003C/span>\"\n }\n }\n setTimeout(function () {\n element.style.animation = \"show_temp_me 5s\"\n setTimeout(function () {\n for (const value of arr) {\n for (let i = 0; i \u003C love[value][0].length; i++) {\n let element = document.getElementById(value + \"_\" + i)\n element.style.color = \"#EB098E\"\n element.style.textShadow = \"2px 2px 2px #FDB0DA\"\n }\n }\n setTimeout(function () {\n document.getElementById(\"temp_me\").remove()\n }, 6000)\n }, 4000)\n resolve(\"change_me_color\")\n }, 500)\n })\n }\n heart() {\n return new Promise(function (resolve) {\n document.getElementById('me').innerHTML += '\u003Cp data-text=\"❤\" id=\"heart\" class=\"heart\">❤\u003C/p>'\n let heart = document.getElementById(\"heart\")\n setTimeout(function () {\n heart.style.opacity = \"1\"\n heart.style.zIndex = \"3\"\n }, 20)\n setTimeout(function () {\n heart.style.animation = \"beat 1s linear infinite\"\n setTimeout(function () {\n resolve(\"heart\")\n }, 500)\n }, 4500)\n })\n }\n show_ta_all() {\n return new Promise(function (resolve) {\n let element = document.getElementById(\"ta\")\n for (const value of arr) {\n for (let i = 0; i \u003C love_2[value][0].length; i++) {\n element.innerHTML += \"\u003Cspan 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;'>❤\u003C/span>\"\n }\n }\n setTimeout(function () {\n element.style.opacity = \"1\"\n setTimeout(function () {\n document.getElementById(\"temp_ta\").remove()\n resolve(\"show_ta_all\")\n }, 3500)\n }, 500)\n })\n }\n near() {\n return new Promise(function (resolve) {\n let me = document.getElementById(\"me\");\n let ta = document.getElementById(\"ta\");\n me.style.top = \"0\";\n me.style.left = \"0\";\n ta.style.top = \"0\";\n ta.style.left = \"0\";\n setTimeout(function () {\n me.style.top = \"-132px\";\n me.style.left = \"-364px\";\n ta.style.top = \"230px\";\n ta.style.left = \"600px\";\n setTimeout(function () {\n resolve(\"near\");\n }, 4000)\n }, 100)\n })\n }\n rotate() {\n return new Promise(function (resolve) {\n document.getElementById(\"box\").style.transform = \"rotate3d(1,1,1,360deg)\";\n setTimeout(function () {\n resolve(\"rotate\")\n }, 6500)\n })\n }\n separate() {\n return new Promise(function (resolve) {\n let ta = document.getElementById(\"ta\")\n ta.style.top = \"0\"\n ta.style.left = \"0\"\n setTimeout(function () {\n resolve()\n }, 3500)\n })\n }\n arrow() {\n return new Promise(function (resolve) {\n let me = document.getElementById(\"me\")\n me.innerHTML += '\u003Cdiv class=\"arrow\" id=\"arrow\">\u003C/div>'\n let element = document.getElementById(\"arrow\");\n for (let i = 0; i \u003C 18; i++) {\n let style = \"'z-index:2;color:#fe0;top:\" + arrow.top[i] + \"px;left:\" + arrow.left[i] + \"px;transform: rotate(\" + arrow.rotate[i] + \"deg)'\"\n element.innerHTML += '\u003Cspan id=\"arrow_' + i + '\" style=' + style + '>❤\u003C/span>'\n }\n setTimeout(function () {\n element.style.top = parseInt(Math.random() * (400 - 100) + 100) + \"px\";\n }, 1000)\n setTimeout(function () {\n let heart = document.getElementById(\"heart\")\n let heart_center_x = Math.floor(heart.getBoundingClientRect().left) + Math.floor(heart.getBoundingClientRect().width / 2)\n let heart_center_y = Math.floor(heart.getBoundingClientRect().top) + Math.floor(heart.getBoundingClientRect().height / 2)\n let arrow = document.getElementById(\"arrow\")\n let rotate = 360 * Math.atan((arrow.getBoundingClientRect().y - heart.getBoundingClientRect().y) / (arrow.getBoundingClientRect().x - heart.getBoundingClientRect().x)) / (2 * Math.PI);\n element.style.transform = \"rotate(\" + rotate + \"deg)\"\n let x = heart_center_x + Math.abs(me.getBoundingClientRect().left) - (arrow.getBoundingClientRect().width / 2)\n let y = heart_center_y + Math.abs(me.getBoundingClientRect().top) - (arrow.getBoundingClientRect().height / 2)\n setTimeout(function () {\n element.style.top = y + 'px'\n element.style.left = x + 'px'\n setTimeout(function () {\n heart.style.animation = \"\"\n resolve()\n }, 2000)\n }, 2000)\n }, 3000)\n })\n }\n heartBroken_() {\n return new Promise(function (resolve) {\n let element = document.getElementById('heart')\n element.classList.add(\"heartBroken\")\n setTimeout(function () {\n element.innerHTML = ''\n element.innerText = ''\n setTimeout(function () {\n document.getElementById('arrow').style.top = window.screen.height + 200 + \"px\"\n setTimeout(function () {\n resolve()\n }, 2000)\n }, 2000)\n }, 800)\n })\n }\n drippingBlood() {\n return new Promise(function (resolve) {\n let height = document.documentElement.clientHeight + 50\n let heart = document.getElementById(\"heart\")\n heart.innerHTML += '\u003Cdiv id=\"blood\">\u003C/div>'\n let blood = document.getElementById('blood')\n let i = 1;\n let stop = 10;\n let intervalID = setInterval(function () {\n if (i === 6){\n resolve()\n }\n if (i > stop) {\n clearInterval(intervalID)\n return\n }\n blood.innerHTML += \"\u003Cp id='blood_\" + i + \"'class='bloods'>\u003C/p>\"\n start(i)\n i++\n }, 1000)\n function start(i){\n if(i === stop){\n setTimeout(function () {\n blood.innerHTML = ''\n },2100)\n }\n setTimeout(function () {\n document.getElementById(\"blood_\" + i).style.top = height+\"px\"\n }, 50)\n }\n })\n }\n ta_disappear(){\n return new Promise(function (resolve){\n let ta = document.getElementById('ta');\n ta.style.top = \"-300px\"\n ta.style.left = \"-200px\"\n ta.style.opacity = '0'\n setTimeout(function () {\n document.getElementById(\"heart\").style.opacity = '0'\n setTimeout(function () {\n resolve()\n },3500)\n },3000)\n })\n }\n broken(){\n return new Promise(function (resolve){\n let height = window.screen.height * 1.2\n let width = window.screen.width * 1.2\n let top = \"\";\n let left = \"\";\n let love_left = document.getElementById('love_left').childNodes;\n let love_right = document.getElementById('love_right').childNodes\n for (let i = 0; i \u003C love_left.length; i++) {\n top = parseInt(Math.random() * (height - 1) + 1)\n left = parseInt(Math.random() * (width - 1) + 1)\n love_left[i].style.transitionDuration = '3s';\n love_left[i].style.top = top + \"px\";\n love_left[i].style.left = left + \"px\";\n love_left[i].style.transform = \"rotate(\"+(Math.random() * (360 - 1) + 1)+\"deg)\"\n }\n for (let i = 0; i \u003C love_right.length; i++) {\n top = parseInt(Math.random() * (height - 1) + 1)\n left = parseInt(Math.random() * (width - 1) + 1)\n love_right[i].style.transitionDuration = '3s';\n love_right[i].style.top = top + \"px\";\n love_right[i].style.left = left + \"px\";\n love_right[i].style.transform = \"rotate(\"+(Math.random() * (360 - 1) + 1)+\"deg)\"\n }\n setTimeout(function () {\n resolve()\n },3500)\n })\n }\n end(){\n document.getElementById('me').style.opacity = '0'\n setTimeout(function () {\n let body = document.getElementsByTagName('body');\n body.removeChild(document.getElementById('box'));\n },5000)\n }\n }\n\u003C/script>\n\u003C/body>\n\u003C/html>\n
浪漫的html表白源代码
李壮壮51: 具体位置在哪
浪漫的html表白源代码
李壮壮51: 具体位置在哪

最新文章

提示

确定要删除当前文章？

取消删除