• 【HTML实战】把专属于她的爱心代码放在自己的网站上是一种什么体验？

     一、  写在前面的话

            看多了李洵的炫酷爱心，今天来点不一样的爱心代码。需要李洵的炫酷爱心代码请看我的上一篇文章。

            最近随着电视剧《点燃我温暖你》的火热播出，剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈，作为一个喜欢动手实践的我来说正是一个大好机会啊，于是我就把代码搬到了自己的网站上，源码我也放在了我的GitHub上，大家有需自取哦~💗

    仓库地址：https://gitee.com/longdebug/web-love-http.git
     

    源码企鹅群号：473193131  或者本人企鹅号：483062431

    后面有时间的话我会将各式各样的爱心代码更新在这个仓库里和群里，如果大家感兴趣的话就来和我一起创造爱心吧~😍

    二、不一样的爱心

    （1）爱心PPT

                   纯前端项目，Html+js照片和音乐这些都可以自行更改。先来看效果图，一张图片一张图片的播放，整体是一个爱心。如果要更改对应文字改对应图片即可。

    1、效果图

    整体效果

    单张图片效果

    2、来吧，代码展示

    主要代码：

    1. <html>HTML>
    7. <html>
    9. <head>
    10. 	<meta http-equiv='Pragma' content='no-cache' />
    11. 	<meta charset="UTF-8">
    12. 	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    13. 	<meta name="author" content="DSX,工科男表白,浪漫表白,表白网站">
    14. 	<meta name="description" content="这是XXX为XXX表白制作的表白网站">
    15. 	<title>XXX LOVE XXXtitle>
    16. 	<link rel="stylesheet" href="all.min.css" >
    17. head>
    18. <body>
    19. 	<div class="flowtime">
    20. 		<div class="ft-section section-1" data-id="section-1">
    21. 			<div id="/section-1/page-1" class="ft-page page-1" data-id="page-1">
    22. 				<p class="text1"><span id="text-75" contenteditable="true">XXspan> ❤ <span id="text-76" contenteditable="true">XXspan> <span id="text-77" contenteditable="true">一生一世span>p>
    23. 				<p class="text2">按键盘 "↓" <span id="text-78" contenteditable="true">开始倾听工科男的浪漫表白span>p>
    24. 			div>
    25. 			<div id="/section-1/page-2" class="ft-page page-2" data-id="page-2">
    26. 				<p class="top-text" id="text-1" contenteditable="true">过去的XX一直是一个人生活，享受着孤独，也憧憬着爱情。p>
    27. 				<img src="img/iali63.jpg" tppabs="img/iali63.jpg"  alt="过去的XX一直是一个人生活，享受着孤独，也憧憬着爱情。" />
    28. 			div>
    29. 			<div id="/section-1/page-3" class="ft-page page-3 left-img" data-id="page-3">
    30. 				<h2 class="text" id="text-2" contenteditable="true">一个人的长廊h2>
    31. 				<img src="img/iali35.jpg" tppabs="img/iali35.jpg"  alt="一个人的长廊"/>
    32. 			div>
    33. 			<div id="/section-1/page-4" class="ft-page page-4 full-img" data-id="page-4">
    34. 				<h2 class="center-text" id="text-3" contenteditable="true">一个人的山岗h2>
    35. 				<img src="img/iali6.jpg" tppabs="img/iali6.jpg"  alt="一个人的山岗" />
    36. 			div>
    37. 		div>
    38. 		<div class="ft-section section-2" data-id="section-2">
    39. 			<div id="/section-2/page-1" class="ft-page page-5 full-img" data-id="page-1">
    40. 				<h2 class="center-text" id="text-4" contenteditable="true">一个人的地铁h2>
    41. 				<img src="img/iali19.jpg" tppabs="img/iali19.jpg"  alt="一个人的地铁" />
    42. 			div>
    43. 			<div id="/section-2/page-2" class="ft-page page-6" data-id="page-2">
    44. 				<h2 class="center-text" id="text-5" contenteditable="true">一个人的游乐场h2>
    45. 				<img src="img/iali29.jpg" tppabs="img/iali29.jpg" alt="一个人的游乐场"/>
    46. 			div>
    47. 			<div id="/section-2/page-3" class="ft-page page-7" data-id="page-3">
    48. 				<h3 id="text-6" contenteditable="true">但他依然乐观，微笑着，等待着h3>
    49. 				<img src="img/iali60.jpg" tppabs="img/iali60.jpg"  alt="但他依然乐观，微笑着，等待着"/>
    50. 			div>
    51. 			<div id="/section-2/page-4" class="ft-page page-8 full-img" data-id="page-4">
    52. 				<h3 id="text-7" contenteditable="true">生活难免有风风雨雨h3>
    53. 				<img src="img/iali51.jpg" tppabs="img/iali51.jpg" alt="生活难免有风风雨雨" />
    54. 			div>
    55. 			<div id="/section-2/page-5" class="ft-page page-9" data-id="page-5">
    56. 				<h3 id="text-8" contenteditable="true">他总是能够轻松的应对h3>
    57. 				<img src="img/iali5.jpg" tppabs="img/iali5.jpg" />
    58. 			div>
    59. 			<div id="/section-2/page-6" class="ft-page page-10" data-id="page-6">
    60. 				<h3 id="text-9" contenteditable="true">并且面带阳光、自信的笑容h3>
    61. 				<img src="img/iali22.jpg" tppabs="img/iali22.jpg" />
    62. 			div>
    63. 		div>
    64. 		<div class="ft-section section-3" data-id="section-3">
    65. 			<div id="/section-3/page-1" class="ft-page page-11 full-img" data-id="page-1">
    66. 				<h3 id="text-10" contenteditable="true">生活也不会总是一帆风顺h3>
    67. 				<img src="img/iali24.jpg" tppabs="img/iali24.jpg"  />
    68. 			div>
    69. 			<div id="/section-3/page-2" class="ft-page page-12" data-id="page-2">
    70. 				<h3><span id="text-11" contenteditable="true">但他每次都能勇敢的面对span><br /><span id="text-12" contenteditable="true">随时准备接受生活的挑战span>h3>
    71. 				<img src="img/iali25.jpg" tppabs="img/iali25.jpg" />
    72. 			div>
    73. 			<div id="/section-3/page-3" class="ft-page page-13" data-id="page-3">
    74. 				<img src="img/iali64.jpg" tppabs="img/iali64.jpg" alt='可是小明的爱情又在哪里呢？' />
    75. 				<h3 id="text-13" contenteditable="true">可是XX的爱情又在哪里呢？h3>
    76. 			div>
    77. 			<div id="/section-3/page-4" class="ft-page page-14 left-img" data-id="page-4">
    78. 				<h3 id="text-14" contenteditable="true">在镜子里面吗？他不敢相信h3>
    79. 				<img src="img/iali46.jpg" tppabs="img/iali46.jpg" />
    80. 			div>
    81. 			<div id="/section-3/page-5" class="ft-page page-15 left-img" data-id="page-5">
    82. 				<h3><span id="text-15" contenteditable="true">他去问大树，我的爱情在哪里？span><br /><span id="text-16" contenteditable="true">大树告诉他，也许就在不远的地方span>h3>
    83. 				<img src="img/iali45.jpg" tppabs="img/iali45.jpg" />
    84. 			div>
    85. 			<div id="/section-3/page-6" class="ft-page page-16 left-img" data-id="page-6">
    86. 				<h3><span id="text-17" contenteditable="true">于是，XX一个人继续向前走span><br /><span id="text-18" contenteditable="true">走在茫茫的雪地上span>h3>
    87. 				<img src="img/iali66.jpg" tppabs="img/iali66.jpg" />
    88. 			div>
    89. 			<div id="/section-3/page-7" class="ft-page page-17 top-text" data-id="page-7">
    90. 				<h3 id="text-19" contenteditable="true">直到有一天XX与XX相遇了h3>
    91. 				<img src="img/iali16.jpg" tppabs="img/iali16.jpg" />
    92. 			div>
    93. 		div>
    94. 		<div class="ft-section section-4" data-id="section-4">
    95. 			<div id="/section-4/page-1" class="ft-page page-18 full-img" data-id="page-1">
    96. 				<p class="text" id="text-20" contenteditable="true">XX喜欢XX，非常非常的喜欢，因为XX的出现，XX脸上有了更加灿烂的笑容p>
    97. 				<img src="img/iali11.jpg" tppabs="img/iali11.jpg"  />
    98. 			div>
    99. 			<div id="/section-4/page-2" class="ft-page page-19" data-id="page-2">
    100. 				<h3 id="text-21" contenteditable="true">可是XX会喜欢XX吗？h3>
    101. 				<img src="img/iali75.jpg" tppabs="img/iali75.jpg" />
    102. 			div>
    103. 			<div id="/section-4/page-3" class="ft-page page-20" data-id="page-3">
    104. 				<img src="img/iali59.png" tppabs="img/iali59.png" />
    105. 				<h3 id="text-22" contenteditable="true">XX想。。。h3>
    106. 				<img src="img/iali9.jpg" tppabs="img/iali9.jpg" />
    107. 			div>
    108. 			<div id="/section-4/page-4" class="ft-page page-21" data-id="page-4">
    109. 				<h3 id="text-23" contenteditable="true">XX想和XX在一起h3>
    110. 				<img src="img/iali59.png" tppabs="img/iali59.png" />
    111. 			div>
    112. 			<div id="/section-4/page-5" class="ft-page page-22 left-img" data-id="page-5">
    113. 				<h3 id="text-24" contenteditable="true">然后XX会经常去找XXh3>
    114. 				<img src="img/iali4.jpg" tppabs="img/iali4.jpg" />
    115. 			div>
    116. 			<div id="/section-4/page-6" class="ft-page page-23 left-img" data-id="page-6">
    117. 				<h3 id="text-25" contenteditable="true">然后两个人一起出去玩h3>
    118. 				<img src="img/iali44.jpg" tppabs="img/iali44.jpg" />
    119. 			div>
    120. 			<div id="/section-4/page-7" class="ft-page page-24 full-img" data-id="page-7">	
    121. 				<h3 id="text-26" contenteditable="true">晚上XX会把XX送回家h3>
    122. 				<img src="img/iali32.jpg" tppabs="img/iali32.jpg" />
    123. 			div>
    124. 		div>
    125. 		<div class="ft-section section-5" data-id="section-5">
    126. 			<div id="/section-5/page-1" class="ft-page page-25 left-img" data-id="page-1">
    127. 				<h3><span id="text-27" contenteditable="true">直到很晚span><br /><span id="text-28" contenteditable="true">XX再一个人回家span>h3>
    128. 				<img src="img/iali37.jpg" tppabs="img/iali37.jpg" />
    129. 			div>
    130. 			<div id="/section-5/page-2" class="ft-page page-26 top-text" data-id="page-2">
    131. 				<h3 id="text-29" contenteditable="true">然后高兴地进入梦乡，在梦中还会和XX在一起h3>
    132. 				<img src="img/iali10.gif" tppabs="img/iali10.gif" />
    133. 			div>
    134. 			<div id="/section-5/page-3" class="ft-page page-27" data-id="page-3">
    135. 				<h3 id="text-30" contenteditable="true">XX想成为了XX的逛街助手h3>
    136. 				<img src="img/iali67.jpg" tppabs="img/iali67.jpg"  />
    137. 			div>
    138. 			<div id="/section-5/page-4" class="ft-page page-28" data-id="page-4">
    139. 				<h3 id="text-31" contenteditable="true">然后，XX和XX一起去很多地方玩h3>
    140. 				<img src="img/iali40.jpg" tppabs="img/iali40.jpg" />
    141. 			div>
    142. 			<div id="/section-5/page-5" class="ft-page page-29" data-id="page-5">
    143. 				<h3 id="text-32" contenteditable="true">XX也想和XX一块成为一对吃货h3>
    144. 				<img src="img/iali12.jpg" tppabs="img/iali12.jpg" />
    145. 			div>
    146. 			<div id="/section-5/page-6" class="ft-page page-30" data-id="page-6">
    147. 				<h3 id="text-33" contenteditable="true">再然后，他们会搬到了一起h3>
    148. 				<img src="img/iali76.gif" tppabs="img/iali76.gif" />
    149. 			div>
    150. 			<div id="/section-5/page-7" class="ft-page page-31" data-id="page-7">
    151. 				<h3 id="text-34" contenteditable="true">再然后，XX会开始学习她的技能h3>
    152. 				<img src="img/iali77.jpg" tppabs="img/iali77.jpg" />
    153. 			div>
    154. 		div>
    155. 		<div class="ft-section section-6" data-id="section-6">
    156. 			<div id="/section-6/page-1" class="ft-page page-32" data-id="page-1">
    157. 				<h3 id="text-35" contenteditable="true">煮饭h3>
    158. 				<img src="img/iali62.jpg" tppabs="img/iali62.jpg"  />
    159. 			div>
    160. 			<div id="/section-6/page-2" class="ft-page page-33 top-text" data-id="page-2">
    161. 				<h3 id="text-36" contenteditable="true">那时候，每天早上，他们吃着自己做的美食h3>
    162. 				<img src="img/iali3.jpg" tppabs="img/iali3.jpg" />
    163. 			div>
    164. 			<div id="/section-6/page-3" class="ft-page page-34 left-img" data-id="page-3">
    165. 				<h3 id="text-37" contenteditable="true">然后在同一个站台，高高兴兴的一起上班h3>
    166. 			div>
    167. 			<div id="/section-6/page-4" class="ft-page page-35" data-id="page-4">
    168. 				<h3><span id="text-38" contenteditable="true">XX会感觉自己好幸福。span><br /><span id="text-39" contenteditable="true">因为自己有了家span><br /><span id="text-40" contenteditable="true">那个有XX在的地方span>h3>
    169. 				<img src="img/iali8.gif" tppabs="img/iali8.gif" />
    170. 			div>
    171. 			<div id="/section-6/page-5" class="ft-page page-36 full-img" data-id="page-5">
    172. 				<h3 id="text-41" contenteditable="true">他们可能偶尔也会吵架h3>
    173. 				<img src="img/iali31.jpg" tppabs="img/iali31.jpg" />
    174. 			div>
    175. 			<div id="/section-6/page-6" class="ft-page page-37 left-img" data-id="page-6">
    176. 				<h3 id="text-42" contenteditable="true">XX不想这样h3>
    177. 				<img src="img/iali49.jpg" tppabs="img/iali49.jpg" />
    178. 			div>
    179. 			<div id="/section-6/page-7" class="ft-page page-38 bottom-text" data-id="page-7">
    180. 				<img src="img/iali21.jpg" tppabs="img/iali21.jpg" />
    181. 				<h3 id="text-43" contenteditable="true">一定是我有什么做的不对，XX会这么想h3>
    182. 			div>
    183. 		div>
    184. 		<div class="ft-section section-7" data-id="section-7">
    185. 			<div id="/section-7/page-1" class="ft-page page-39 left-img" data-id="page-1">
    186. 				<h3 id="text-44" contenteditable="true">如果没有XX在身边，窗外就没有风景h3>
    187. 				<img src="img/iali2.jpg" tppabs="img/iali2.jpg" />
    188. 			div>
    189. 			<div id="/section-7/page-2" class="ft-page page-40" data-id="page-2">
    190. 				<h3 id="text-45" contenteditable="true">如果没有XX在身后h3>
    191. 				<img src="img/iali14.jpg" tppabs="img/iali14.jpg"  />
    192. 			div>
    193. 			<div id="/section-7/page-3" class="ft-page page-41" data-id="page-3">
    194. 				<img src="img/iali30_1.jpg" tppabs="img/iali30_1.jpg" class='img1'/>
    195. 				<img src="img/iali30_2.jpg" tppabs="img/iali30_2.jpg" class='img2'/>
    196. 				<h3 id="text-46" contenteditable="true"> XX又怎会飞的更高更远h3>
    197. 			div>
    198. 			<div id="/section-7/page-4" class="ft-page page-42" data-id="page-4">
    199. 				<h3><span id="text-47" contenteditable="true">XX不想这样。他要为XX改变自己span><br /><span id="text-48" contenteditable="true">XX不知道XX喜欢什么，但他一定会满足她的一切。span>h3>
    200. 				<img src="img/iali69.jpg" tppabs="img/iali69.jpg"  />
    201. 			div>
    202. 			<div id="/section-7/page-5" class="ft-page page-43" data-id="page-5">
    203. 				<img src="img/iali42.jpg" tppabs="img/iali42.jpg" />
    204. 				<h3 id="text-49" contenteditable="true">我愿意一直陪伴着你h3>
    205. 			div>
    206. 			<div id="/section-7/page-6" class="ft-page page-44 left-img" data-id="page-6">
    207. 				<h3><span id="text-50" contenteditable="true">爱情就像花草一样span><br /><span id="text-51" contenteditable="true">需要用包容来浇灌span>h3>
    208. 				<img src="img/iali0.jpg" tppabs="img/iali0.jpg" />
    209. 			div>
    210. 			<div id="/section-7/page-7" class="ft-page page-45 left-img" data-id="page-7">
    211. 				<h3><span id="text-52" contenteditable="true">直到一天，XX不想让自己后悔span><br /><span id="text-53" contenteditable="true">XX开始准备一份惊喜span>h3>
    212. 				<img src="img/iali18.jpg" tppabs="img/iali18.jpg" />
    213. 			div>
    214. 		div>
    215. 		<div class="ft-section section-8" data-id="section-8">
    216. 			<div id="/section-8/page-1" class="ft-page page-46" data-id="page-1">
    217. 				<img src="img/iali57.gif" tppabs="img/iali57.gif" />
    218. 				<h3>
    219. 					<span id="text-54" contenteditable="true">看着惊喜一点点准备好了span>
    220. 					<span id="text-55" contenteditable="true">XX好开心span>
    221. 					<span id="text-56" contenteditable="true">因为他想象着XX看到时span>
    222. 					<span id="text-57" contenteditable="true">开心的样子span>
    223. 				h3>
    224. 			div>
    225. 			<div id="/section-8/page-2" class="ft-page page-47 top-text" data-id="page-2">
    226. 				<img src="img/iali58.jpg" tppabs="img/iali58.jpg" />
    227. 				<h3>
    228. 					<span id="text-58" contenteditable="true">想想未来他们或许span>
    229.                     <span id="text-59" contenteditable="true">会有一辈子span>
    230. 					<span id="text-59" contenteditable="true">XX好开心span>
    231. 					<span id="text-60" contenteditable="true">或许他可以和XX一起span>
    232. 					<span id="text-61" contenteditable="true">去全世界好多地方玩span>h3>
    233. 				
    234. 			div>
    235. 			<div id="/section-8/page-3" class="ft-page page-48 left-img" data-id="page-3">
    236. 				<p><span id="text-62" contenteditable="true">XX也会继续努力span><br /><span id="text-63" contenteditable="true">为了他和XX的梦之城堡span>p>
    237. 				<img src="img/iali65.jpg" tppabs="img/iali65.jpg"  />
    238. 			div>
    239. 			<div id="/section-8/page-4" class="ft-page page-49 full-img" data-id="page-4">
    240. 			<img src="img/iali71.jpg" tppabs="img/iali71.jpg" />
    241. 				<p class="text">
    242. 					<span class='text' id="text-64" contenteditable="true">XX很幸福，因为他遇到了XX。他相信后面的每天都会是快乐的span><br />
    243. 					<span class='text' id="text-65" contenteditable="true">简简单单，体会与XX在一起的每一个刻span>
    244. 				p>
    245. 			div>
    246. 			<div id="/section-8/page-5" class="ft-page page-50" data-id="page-5">
    247. 				<p class='text' id="text-66" contenteditable="true">XX想和XX一起过幸福的生活p>
    248. 				<img src="img/iali50_1.jpg" tppabs="img/iali50_1.jpg" class='img1' />
    249. 				<img src="img/iali50_2.jpg" tppabs="img/iali50_2.jpg" class='img2' />
    250. 			div>
    251. 			<div id="/section-8/page-6" class="ft-page page-51" data-id="page-6">
    252. 				<p>
    253. 					<span id="text-67" contenteditable="true">永远有多远？span><br />
    254. 					<span id="text-68" contenteditable="true">比时间多一秒就是永远，我会永远爱你span><br />
    255. 					<span id="text-69" contenteditable="true">世界有多大？span><br />
    256. 					<span id="text-70" contenteditable="true">你走到哪里，世界就有多大span>
    257. 					p>
    258. 			div>
    259. 		div>
    260. 		<div class="ft-section section-9" data-id="section-9">
    261. 			<div id="/section-9/page-1" class="ft-page page-52 full-img" data-id="page-1">
    262. 				<h3 id="text-71" contenteditable="true">如果三年后你注定是我女朋友，你何不提早行使你的权利h3>
    263. 				<img src="img/iali20.jpg" tppabs="img/iali20.jpg"  />
    264. 			div>
    265. 			<div id="/section-9/page-2" class="ft-page page-53" data-id="page-2">
    266. 				<img src="img/iali68.jpg" tppabs="img/iali68.jpg" alt='happy birthday' />
    267. 				<h3 id="text-72" contenteditable="true">我爱你h3>
    268. 			div>
    269. 			<div id="/section-9/page-3" class="ft-page page-54 center-img" data-id="page-3" >
    270. 				<div class="center-img">I love youdiv>
    271. 			div>
    272. 			<div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4">
    273. 				<img src="img/14915.jpg" tppabs="img/14915.jpg" />
    274. 				<p class="text">
    275. 					<span id="text-73" contenteditable="true">我相信，XX和XX的故事会一直继续下去。span><br />
    276. 					<span id="text-74" contenteditable="true">无论精彩、平淡都会是他们喜欢的。span><br />
    277.                     <span id="text-74" contenteditable="true">XXX，我爱你span><br />
    278. 					<br />
    279. 					<br />
    280. 					<span> -- 按“Esc"键有惊喜span>
    281. 				p>				
    282. 			div>
    283. 		div>
    284. 	div>
    285. 	<div class="nojavascript">您的浏览器禁用了javascript，无法正常浏览本页面div>
    286. 	
    287.  
    288. 	<audio id="bgmMusic" src="lovebgm.mp3" autoplay="autoplay" loop preload="auto" type="audio/mp3">audio>
    289.  
    290. 	
    291. 	<script src="jquery.min.js" tppabs="http://libs.baidu.com/jquery/1.8.3/jquery.min.js">script>
    292. 	<script src="all.min.js" >script>
    293. 	<script src="love.min.js" >script>
    294. 	<div class="mPower"><span id="on" title="点击暂停" style="">span><span id="off" title="点击播放"  style="">span>div>
    295.  
    296. 	
    297. body>
    298. html>

     整体文件夹：

    需要下载文件的请加群下载或者文章开头提到的下载仓库。

    （2）简单跳动爱心

            看了上一个比较难的爱心，这下来一个简单的爱心教程吧，直接一个文件搞定。

    1、老规矩先看效果。

    开玩笑的这不是真的。来了来了，它来了。

    2、代码展示

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>小龙同学title>
    7.     <meta name="language" content="zh-CN">
    8.     
    9.     <link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png">
    10.     <style>
    11.         * {
    12.             padding: 0;
    13.             margin: 0;
    14.         }
    15.  
    16.         body {
    17.             background-color: pink;
    18.  
    19.         }
    20.  
    21.         #frame {
    22.             position: relative;
    23.             width: 400px;
    24.             height: 300px;
    25.             margin: 250px auto;
    26.         }
    27.  
    28.         .left,
    29.         .right {
    30.             top: 0;
    31.             width: 200px;
    32.             height: 200px;
    33.             border-radius: 50%;
    34.         }
    35.  
    36.         .left {
    37.             left: 35px;
    38.  
    39.         }
    40.  
    41.         .right {
    42.             right: 35px;
    43.             z-index: -1;
    44.         }
    45.  
    46.         .bottom {
    47.             bottom: 36px;
    48.             left: 100px;
    49.             width: 200px;
    50.             height: 200px;
    51.             transform: rotate(45deg);
    52.             z-index: -1;
    53.  
    54.         }
    55.  
    56.         .heart {
    57.             position: absolute;
    58.             box-shadow: 0 0 40px #d5093c;
    59.             animation: beat .4s ease infinite normal;
    60.             background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
    61.         }
    62.  
    63.         @keyframes beat {
    64.             0% {
    65.                 transform: scale(1) rotate(225deg);
    66.                 box-shadow: 0 0 40px #d5093c;
    67.             }
    68.  
    69.             50% {
    70.                 transform: scale(1.1) rotate(225deg);
    71.                 box-shadow: 0 0 70px #d5093c;
    72.             }
    73.  
    74.             100% {
    75.                 transform: scale(1) rotate(225deg);
    76.                 box-shadow: 0 0 40px #d5093c;
    77.                 ;
    78.             }
    79.         }
    80.  
    81.         .word {
    82.             position: absolute;
    83.             width: 50%;
    84.             top: 75%;
    85.             left: 25%;
    86.             text-align: center;
    87.             transform: translateY(-50%);
    88.             font-family: 'Love Ya Like A Sister', cursive;
    89.             font-size: 40px;
    90.             color: #c70012;
    91.             padding: 0 20px;
    92.         }
    93.     style>
    94. head>
    95.  
    96. <body>
    97.  
    98.     <div id="frame">
    99.         <div class="heart left">div>
    100.         <div class="heart right">div>
    101.         <div class="heart bottom">div>
    102.     div>
    103.  
    104.     <b class="word">每次遇见你都心跳加速!b>
    105.  
    106.     <audio autoplay="autopaly" loop="loop" id="audios" preload="auto">
    107.         <source src="http://music.163.com/song/media/outer/url?id=526464145.mp3" />
    108.     audio>
    109.  
    110.     <script>
    111.         var b = document.body;
    112.         var c = document.getElementsByTagName('canvas')[0];
    113.         var a = c.getContext('2d');
    114.         document.body.clientWidth;
    115.         with (m = Math) C = cos, S = sin, P = pow, R = random; c.width = c.height = f = 600; h = -250; function p(a, b, c) { if (c > 60) return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a]; A = a * 2 - 1; B = b * 2 - 1; if (A * A + B * B < 1) { if (c > 37) { n = (j = c & 1) ? 6 : 4; o = .5 / (a + .01) + C(b * 125) * 3 - a * 300; w = b * h; return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6] } if (c > 32) { c = c * 1.16 - .15; o = a * 45 - 20; w = b * b * h; z = o * S(c) + w * C(c) + 620; return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7] } o = A * (2 - b) * (80 - c * 2); w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2; z = o * S(c) + w * C(c) + 700; return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05] } } setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}', 0)
    116.     script>
    117. body>
    118.  
    119. html>

    需要文件也可以到群文件下载。

    （3）收缩的专属爱心

           

    爱心千千万，还不如一颗专属爱心。

    1、效果演示

    2、代码展示

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>送给哩哩title>
    6.     <style>
    7.         canvas {
    8.             position: absolute;
    9.             left: 0;
    10.             top: 0;
    11.             width: 100%;
    12.             height: 100%;
    13.             background-color: rgba(0, 0, 0, .2);
    14.         }
    15. 		  #child{
    16.             position: fixed;
    17.             top:55%;
    18.             left: 50%;
    19.             margin-top: -55px;
    20.             margin-left:-100px ;
    21.  
    22.         }
    23. 		h4{font-family:"黑体";font-size: 40px;color:#f47920;position: relative;top: -70px;left: -80px;}
    24.     style>
    25. head>
    26. <body>
    27.  
    28. <canvas id="heart">canvas>
    29. <script>
    30.     window.requestAnimationFrame =
    31.         window.__requestAnimationFrame ||
    32.         window.requestAnimationFrame ||
    33.         window.webkitRequestAnimationFrame ||
    34.         window.mozRequestAnimationFrame ||
    35.         window.oRequestAnimationFrame ||
    36.         window.msRequestAnimationFrame ||
    37.         (function () {
    38.             return function (callback, element) {
    39.                 var lastTime = element.__lastTime;
    40.                 if (lastTime === undefined) {
    41.                     lastTime = 0;
    42.                 }
    43.                 var currTime = Date.now();
    44.                 var timeToCall = Math.max(1, 33 - (currTime - lastTime));
    45.                 window.setTimeout(callback, timeToCall);
    46.                 element.__lastTime = currTime + timeToCall;
    47.             };
    48.         })();
    49.     window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));
    50.     var loaded = false;
    51.     var init = function () {
    52.         if (loaded) return;
    53.         loaded = true;
    54.         var mobile = window.isDevice;
    55.         var koef = mobile ? 0.5 : 1;
    56.         var canvas = document.getElementById('heart');
    57.         var ctx = canvas.getContext('2d');
    58.         var width = canvas.width = koef * innerWidth;
    59.         var height = canvas.height = koef * innerHeight;
    60.         var rand = Math.random;
    61.         ctx.fillStyle = "rgba(0,0,0,1)";
    62.         ctx.fillRect(0, 0, width, height);
    63.  
    64.         var heartPosition = function (rad) {
    65.             //return [Math.sin(rad), Math.cos(rad)];
    66.             return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];
    67.         };
    68.         var scaleAndTranslate = function (pos, sx, sy, dx, dy) {
    69.             return [dx + pos[0] * sx, dy + pos[1] * sy];
    70.         };
    71.  
    72.         window.addEventListener('resize', function () {
    73.             width = canvas.width = koef * innerWidth;
    74.             height = canvas.height = koef * innerHeight;
    75.             ctx.fillStyle = "rgba(0,0,0,1)";
    76.             ctx.fillRect(0, 0, width, height);
    77.         });
    78.  
    79.         var traceCount = mobile ? 20 : 50;
    80.         var pointsOrigin = [];
    81.         var i;
    82.         var dr = mobile ? 0.3 : 0.1;
    83.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));
    84.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));
    85.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));
    86.         var heartPointsCount = pointsOrigin.length;
    87.  
    88.         var targetPoints = [];
    89.         var pulse = function (kx, ky) {
    90.             for (i = 0; i < pointsOrigin.length; i++) {
    91.                 targetPoints[i] = [];
    92.                 targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;
    93.                 targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;
    94.             }
    95.         };
    96.  
    97.         var e = [];
    98.         for (i = 0; i < heartPointsCount; i++) {
    99.             var x = rand() * width;
    100.             var y = rand() * height;
    101.             e[i] = {
    102.                 vx: 0,
    103.                 vy: 0,
    104.                 R: 2,
    105.                 speed: rand() + 5,
    106.                 q: ~~(rand() * heartPointsCount),
    107.                 D: 2 * (i % 2) - 1,
    108.                 force: 0.2 * rand() + 0.7,
    109.                 f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",
    110.                 trace: []
    111.             };
    112.             for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};
    113.         }
    114.  
    115.         var config = {
    116.             traceK: 0.4,
    117.             timeDelta: 0.01
    118.         };
    119.  
    120.         var time = 0;
    121.         var loop = function () {
    122.             var n = -Math.cos(time);
    123.             pulse((1 + n) * .5, (1 + n) * .5);
    124.             time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;
    125.             ctx.fillStyle = "rgba(0,0,0,.1)";
    126.             ctx.fillRect(0, 0, width, height);
    127.             for (i = e.length; i--;) {
    128.                 var u = e[i];
    129.                 var q = targetPoints[u.q];
    130.                 var dx = u.trace[0].x - q[0];
    131.                 var dy = u.trace[0].y - q[1];
    132.                 var length = Math.sqrt(dx * dx + dy * dy);
    133.                 if (10 > length) {
    134.                     if (0.95 < rand()) {
    135.                         u.q = ~~(rand() * heartPointsCount);
    136.                     } else {
    137.                         if (0.99 < rand()) {
    138.                             u.D *= -1;
    139.                         }
    140.                         u.q += u.D;
    141.                         u.q %= heartPointsCount;
    142.                         if (0 > u.q) {
    143.                             u.q += heartPointsCount;
    144.                         }
    145.                     }
    146.                 }
    147.                 u.vx += -dx / length * u.speed;
    148.                 u.vy += -dy / length * u.speed;
    149.                 u.trace[0].x += u.vx;
    150.                 u.trace[0].y += u.vy;
    151.                 u.vx *= u.force;
    152.                 u.vy *= u.force;
    153.                 for (k = 0; k < u.trace.length - 1;) {
    154.                     var T = u.trace[k];
    155.                     var N = u.trace[++k];
    156.                     N.x -= config.traceK * (N.x - T.x);
    157.                     N.y -= config.traceK * (N.y - T.y);
    158.                 }
    159.                 ctx.fillStyle = u.f;
    160.                 for (k = 0; k < u.trace.length; k++) {
    161.                     ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);
    162.                 }
    163.             }
    164.             ctx.fillStyle = "rgba(255,255,255,1)";
    165.             for (i = u.trace.length + 13; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);
    166.  
    167.             window.requestAnimationFrame(loop, canvas);
    168.         };
    169.         loop();
    170.     };
    171.  
    172.     var s = document.readyState;
    173.     if (s === 'complete' || s === 'loaded' || s === 'interactive') init();
    174.     else document.addEventListener('DOMContentLoaded', init, false);
    175. script>
    176. <div id="child"><h4>💗送给我的小婷婷h4>div>
    177.  
    178.  
    179. body>
    180. html>

    三、写在最后的小福利

            一个三个爱心够了，不能再多了

    第一个比较难，有多个文件相互引用，想实现跨越直接下载群里的文件，修改照片和音乐就可以了，第二个和第三个比较简单，只有一个文件。如果是手机实现第二个和第三可以先创建一个txt文件再把代码复制进去，最后修改后缀名为html就可以了。周周学java

     

  • 相关阅读:
    工业控制系统的安全研究与实践引言
    在VirtualLab Fusion的示例中演示连接场解算器
    我终于体会到了：代码竟然不可以运行，为什么呢？代码竟然可以运行，为什么呢？
    Python使用random模块随机生成ip、端口、字符串
    安全架构设计理论与实践
    webpack5零基础入门-6webpack处理图片资源
    用Vue编写一个简单的仿Explorer文件管理器
    树和二叉树练习题
    ubuntu20单主机安装hadoop，python的简单操作
    python Zipf定律-高度偏斜分布
  • 原文地址：https://blog.csdn.net/lonzgzhouzhou/article/details/127830200