devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html动态爱心代码【附源码】_爱心代码html源码

作者：花生_TL007 | 2024-05-21 16:13:10

赞

踩

爱心代码html源码

来，大家先看图片（时间都是会动的）

是不是很美啊

话不多说，上代码

顺计时

  1. <head>
  2. 	
  3. 		<meta charset="utf-8">
  4. 	
  5. 		<title>快乐</title>
  6. 	
  7. 		<style>
  8. 			body {
  9. 	
  10. 				overflow: hidden;
  11. 	
  12. 				margin: 0;
  13. 	
  14. 			}
  15. 	
  16. 			h1 {
  17. 	
  18. 				position: fixed;
  19. 	
  20. 				top: 30%;
  21. 	
  22. 				left: 0;
  23. 	
  24. 				width: 100%;
  25. 	
  26. 				text-align: center;
  27. 	
  28. 				transform: translateY(-50%);
  29. 	
  30. 				font-family: 'Love Ya Like A Sister', cursive;
  31. 	
  32. 				font-size: 60px;
  33. 	
  34. 				color: ff64d9;
  35. 	
  36. 				padding: 0 20px;
  37. 	
  38. 			}
  39. 	
  40. 			h1 span {
  41. 	
  42. 				position: fixed;
  43. 	
  44. 				left: 0;
  45. 	
  46. 				width: 100%;
  47. 	
  48. 				text-align: center;
  49. 	
  50. 				margin-top: 30px;
  51. 	
  52. 				font-size: 40px;
  53. 	
  54. 			}
  55. 		</style>
  56. 	
  57. 	</head>
  58. 	
  59. 	<body>
  60. 	
  61. 		<h1 id="h1"></h1>
  62. 	
  63. 		<canvas></canvas>
  64. 	
  65. 		<script>
  66. 			var canvas = document.querySelector("canvas"),
  67. 	
  68. 				ctx = canvas.getContext("2d");
  69. 	
  70. 			var ww, wh;
  71. 	
  72. 			function onResize() {
  73. 	
  74. 				ww = canvas.width = window.innerWidth;
  75. 	
  76. 				wh = canvas.height = window.innerHeight;
  77. 	
  78. 			}
  79. 	
  80. 			ctx.strokeStyle = "red";
  81. 	
  82. 			ctx.shadowBlur = 25;
  83. 	
  84. 			ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  85. 	
  86. 			var precision = 100;
  87. 	
  88. 			var hearts = [];
  89. 	
  90. 			var mouseMoved = false;
  91. 	
  92. 			function onMove(e) {
  93. 	
  94. 				mouseMoved = true;
  95. 	
  96. 				if (e.type === "tm") {
  97. 	
  98. 					hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  99. 	
  100. 					hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  101. 	
  102. 				} else {
  103. 	
  104. 					hearts.push(new Heart(e.clientX, e.clientY));
  105. 	
  106. 					hearts.push(new Heart(e.clientX, e.clientY));
  107. 	
  108. 				}
  109. 	
  110. 			}
  111. 	
  112. 			var Heart = function(x, y) {
  113. 	
  114. 				this.x = x || Math.random() * ww;
  115. 	
  116. 				this.y = y || Math.random() * wh;
  117. 	
  118. 				this.size = Math.random() * 2 + 1;
  119. 	
  120. 				this.shadowBlur = Math.random() * 10;
  121. 	
  122. 				this.speedX = (Math.random() + 0.2 - 0.6) * 8;
  123. 	
  124. 				this.speedY = (Math.random() + 0.2 - 0.6) * 8;
  125. 	
  126. 				this.speedSize = Math.random() * 0.05 + 0.01;
  127. 	
  128. 				this.opacity = 1;
  129. 	
  130. 				this.vertices = [];
  131. 	
  132. 				for (var i = 0; i < precision; i++) {
  133. 	
  134. 					var step = (i / precision - 0.5) * (Math.PI * 2);
  135. 	
  136. 					var vector = {
  137. 	
  138. 						x: (15 * Math.pow(Math.sin(step), 3)),
  139. 	
  140. 						y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
  141. 	
  142. 					}
  143. 	
  144. 					this.vertices.push(vector);
  145. 	
  146. 				}
  147. 	
  148. 			}
  149. 	
  150. 			Heart.prototype.draw = function() {
  151. 	
  152. 				this.size -= this.speedSize;
  153. 	
  154. 				this.x += this.speedX;
  155. 	
  156. 				this.y += this.speedY;
  157. 	
  158. 				ctx.save();
  159. 	
  160. 				ctx.translate(-1000, this.y);
  161. 	
  162. 				ctx.scale(this.size, this.size);
  163. 	
  164. 				ctx.beginPath();
  165. 	
  166. 				for (var i = 0; i < precision; i++) {
  167. 	
  168. 					var vector = this.vertices[i];
  169. 	
  170. 					ctx.lineTo(vector.x, vector.y);
  171. 	
  172. 				}
  173. 	
  174. 				ctx.globalAlpha = this.size;
  175. 	
  176. 				ctx.shadowBlur = Math.round((3 - this.size) * 10);
  177. 	
  178. 				ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  179. 	
  180. 				ctx.shadowOffsetX = this.x + 1000;
  181. 	
  182. 				ctx.globalCompositeOperation = "screen"
  183. 	
  184. 				ctx.closePath();
  185. 	
  186. 				ctx.fill()
  187. 	
  188. 				ctx.restore();
  189. 	
  190. 			};
  191. 	
  192. 			function render(a) {
  193. 	
  194. 				requestAnimationFrame(render);
  195. 	
  196. 				hearts.push(new Heart())
  197. 	
  198. 				ctx.clearRect(0, 0, ww, wh);
  199. 	
  200. 				for (var i = 0; i < hearts.length; i++) {
  201. 	
  202. 					hearts[i].draw();
  203. 	
  204. 					if (hearts[i].size <= 0) {
  205. 	
  206. 						hearts.splice(i, 1);
  207. 	
  208. 						i--;
  209. 	
  210. 					}
  211. 	
  212. 				}
  213. 	
  214. 			}
  215. 	
  216. 			onResize();
  217. 	
  218. 			window.addEventListener("mmo", onMove);
  219. 	
  220. 			window.addEventListener("tm", onMove);
  221. 	
  222. 			window.addEventListener("resize", onResize);
  223. 	
  224. 			requestAnimationFrame(render);
  225. 	
  226. 			window.onload = function starttime() {
  227. 	
  228. 				time(h1, '2023,03,08'); // 2023年女神节时间+1
  229. 	
  230. 				ptimer = setTimeout(starttime, 1000); // 添加计时器
  231. 	
  232. 			}
  233. 	
  234. 			function time(obj, futimg) {
  235. 	
  236. 				var nowtime = new Date().getTime(); // 现在时间转换为时间戳
  237. 	
  238. 				var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳
  239. 	
  240. 				var msec = nowtime - futruetime; // 毫秒 现在时间-未来时间
  241. 	
  242. 				var time = (msec / 1000); // 毫秒/1000
  243. 	
  244. 				var day = parseInt(time / 86400); // 天  24*60*60*1000
  245. 	
  246. 				var hour = parseInt(time / 3600) - 24 * day; // 小时 60*60 总小时数-过去的小时数=现在的小时数
  247. 	
  248. 				var minute = parseInt(time % 3600 / 60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
  249. 	
  250. 				var second = parseInt(time % 60); // 以60秒为一整份 取余 剩下秒数
  251. 				var mz = second<10?'0'+second:second;
  252. 				var fz = minute<10?'0'+minute:minute;
  253. 				obj.innerHTML = "<b><br>每天快乐:<br></b>" + hour + ":" + fz + ":" + mz +
  254. 					"<br><span>愿东哥<br>平安喜乐<br>万事顺遂</span>"
  255. 					
  256. 				return true;
  257. 			}
  258. 		</script>
  259. 	
  260. 	</body>

 倒计时

  1. 	<head>
  2.  
  3. 		<meta charset="utf-8">
  4.  
  5. 		<title>未来</title>
  6.  
  7. 		<style>
  8. 			body {
  9.  
  10. 				overflow: hidden;
  11.  
  12. 				margin: 0;
  13.  
  14. 			}
  15.  
  16. 			h1 {
  17.  
  18. 				position: fixed;
  19.  
  20. 				top: 30%;
  21.  
  22. 				left: 0;
  23.  
  24. 				width: 100%;
  25.  
  26. 				text-align: center;
  27.  
  28. 				transform: translateY(-50%);
  29.  
  30. 				font-family: 'Love Ya Like A Sister', cursive;
  31.  
  32. 				font-size: 60px;
  33.  
  34. 				color: ff64d9;
  35.  
  36. 				padding: 0 20px;
  37.  
  38. 			}
  39.  
  40. 			h1 span {
  41.  
  42. 				position: fixed;
  43.  
  44. 				left: 0;
  45.  
  46. 				width: 100%;
  47.  
  48. 				text-align: center;
  49.  
  50. 				margin-top: 30px;
  51.  
  52. 				font-size: 40px;
  53.  
  54. 			}
  55. 		</style>
  56.  
  57. 	</head>
  58.  
  59. 	<body>
  60.  
  61. 		<h1 id="h1"></h1>
  62.  
  63. 		<canvas></canvas>
  64.  
  65. 		<script>
  66. 			var canvas = document.querySelector("canvas"),
  67.  
  68. 				ctx = canvas.getContext("2d");
  69.  
  70. 			var ww, wh;
  71.  
  72. 			function onResize() {
  73.  
  74. 				ww = canvas.width = window.innerWidth;
  75.  
  76. 				wh = canvas.height = window.innerHeight;
  77.  
  78. 			}
  79.  
  80. 			ctx.strokeStyle = "red";
  81.  
  82. 			ctx.shadowBlur = 25;
  83.  
  84. 			ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  85.  
  86. 			var precision = 100;
  87.  
  88. 			var hearts = [];
  89.  
  90. 			var mouseMoved = false;
  91.  
  92. 			function onMove(e) {
  93.  
  94. 				mouseMoved = true;
  95.  
  96. 				if (e.type === "touchmove") {
  97.  
  98. 					hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  99.  
  100. 					hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  101.  
  102. 				} else {
  103.  
  104. 					hearts.push(new Heart(e.clientX, e.clientY));
  105.  
  106. 					hearts.push(new Heart(e.clientX, e.clientY));
  107.  
  108. 				}
  109.  
  110. 			}
  111.  
  112. 			var Heart = function(x, y) {
  113.  
  114. 				this.x = x || Math.random() * ww;
  115.  
  116. 				this.y = y || Math.random() * wh;
  117.  
  118. 				this.size = Math.random() * 2 + 1;
  119.  
  120. 				this.shadowBlur = Math.random() * 10;
  121.  
  122. 				this.speedX = (Math.random() + 0.2 - 0.6) * 8;
  123.  
  124. 				this.speedY = (Math.random() + 0.2 - 0.6) * 8;
  125.  
  126. 				this.speedSize = Math.random() * 0.05 + 0.01;
  127.  
  128. 				this.opacity = 1;
  129.  
  130. 				this.vertices = [];
  131.  
  132. 				for (var i = 0; i < precision; i++) {
  133.  
  134. 					var step = (i / precision - 0.5) * (Math.PI * 2);
  135.  
  136. 					var vector = {
  137.  
  138. 						x: (15 * Math.pow(Math.sin(step), 3)),
  139.  
  140. 						y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
  141.  
  142. 					}
  143.  
  144. 					this.vertices.push(vector);
  145.  
  146. 				}
  147.  
  148. 			}
  149.  
  150. 			Heart.prototype.draw = function() {
  151.  
  152. 				this.size -= this.speedSize;
  153.  
  154. 				this.x += this.speedX;
  155.  
  156. 				this.y += this.speedY;
  157.  
  158. 				ctx.save();
  159.  
  160. 				ctx.translate(-1000, this.y);
  161.  
  162. 				ctx.scale(this.size, this.size);
  163.  
  164. 				ctx.beginPath();
  165.  
  166. 				for (var i = 0; i < precision; i++) {
  167.  
  168. 					var vector = this.vertices[i];
  169.  
  170. 					ctx.lineTo(vector.x, vector.y);
  171.  
  172. 				}
  173.  
  174. 				ctx.globalAlpha = this.size;
  175.  
  176. 				ctx.shadowBlur = Math.round((3 - this.size) * 10);
  177.  
  178. 				ctx.shadowColor = "hsla(140, 66%, 66%, 255)";
  179.  
  180. 				ctx.shadowOffsetX = this.x + 1000;
  181.  
  182. 				ctx.globalCompositeOperation = "screen"
  183.  
  184. 				ctx.closePath();
  185.  
  186. 				ctx.fill()
  187.  
  188. 				ctx.restore();
  189.  
  190. 			};
  191.  
  192. 			function render(a) {
  193.  
  194. 				requestAnimationFrame(render);
  195.  
  196. 				hearts.push(new Heart())
  197.  
  198. 				ctx.clearRect(0, 0, ww, wh);
  199.  
  200. 				for (var i = 0; i < hearts.length; i++) {
  201.  
  202. 					hearts[i].draw();
  203.  
  204. 					if (hearts[i].size <= 0) {
  205.  
  206. 						hearts.splice(i, 1);
  207.  
  208. 						i--;
  209.  
  210. 					}
  211.  
  212. 				}
  213.  
  214. 			}
  215.  
  216. 			onResize();
  217.  
  218. 			window.addEventListener("mousemove", onMove);
  219.  
  220. 			window.addEventListener("touchmove", onMove);
  221.  
  222. 			window.addEventListener("resize", onResize);
  223.  
  224. 			requestAnimationFrame(render);
  225.  
  226. 			window.onload = function starttime() {
  227.  
  228. 				time(h1, '2024,1,1'); // 2023年1月1日
  229.  
  230. 				ptimer = setTimeout(starttime, 1000); // 添加计时器
  231.  
  232. 			}
  233.  
  234. 			function time(obj, futimg) {
  235.  
  236. 				var nowtime = new Date().getTime(); // 现在时间转换为时间戳
  237.  
  238. 				var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳
  239.  
  240. 				var msec = futruetime - nowtime; // 毫秒 未来时间-现在时间
  241.  
  242. 				var time = (msec / 1000); // 毫秒/1000
  243.  
  244. 				var day = parseInt(time / 86400); // 天  24*60*60*1000
  245.  
  246. 				var hour = parseInt(time / 3600) - 24 * day; // 小时 60*60 总小时数-过去的小时数=现在的小时数
  247.  
  248. 				var minute = parseInt(time % 3600 / 60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
  249.  
  250. 				var second = parseInt(time % 60); // 以60秒为一整份 取余 剩下秒数
  251.  
  252. 				obj.innerHTML = "<br>距2024年还有：<br>" + day + "天" + hour + "小时" + minute + "分" + second + "秒" +
  253. 					"<br><span>愿在明年来临前<br>大家将迎来新的蜕变</span>"
  254.  
  255. 				return true;
  256.  
  257. 			}
  258. 		</script>
  259.  
  260. 	</body>

祝大家在情场顺风顺水 ！！

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

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

  

闽ICP备14008679号