当前位置:   article > 正文

爱心代码(两种)_文本文档爱心代码

文本文档爱心代码

第一步:在电脑桌面上新建一个txt文本文档;

第二步:把代码粘贴进去并保存;

第三步:把文件后缀名txt改成html;

5b1761b2b4554887a2f74d2df16c18d0.png

第四步:双击文件打开即可。

代码一

  1. <!DOCTYPE html>
  2. <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>Love1</title>
  4. <style type="text/css">
  5. body {
  6. background-color: #000;
  7. margin: 0;
  8. overflow: hidden;
  9. background-repeat: no-repeat;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <canvas id="canvas" width="805" height="946">
  15. </canvas>
  16. <script>
  17. var canvas = document.getElementById("canvas");
  18. canvas.width = window.innerWidth;
  19. canvas.height = window.innerHeight;
  20. // Initialize the GL context
  21. var gl = canvas.getContext('webgl');
  22. if (!gl) {
  23. console.error("Unable to initialize WebGL.");
  24. }
  25. //Time step
  26. var dt = 0.015;
  27. //Time
  28. var time = 0.0;
  29. //************** Shader sources **************
  30. var vertexSource = `
  31. attribute vec2 position;
  32. void main() {
  33. gl_Position = vec4(position, 0.0, 1.0);
  34. }
  35. `;
  36. var fragmentSource = `
  37. precision highp float;
  38. uniform float width;
  39. uniform float height;
  40. vec2 resolution = vec2(width, height);
  41. uniform float time;
  42. #define POINT_COUNT 8
  43. vec2 points[POINT_COUNT];
  44. const float speed = -0.5;
  45. const float len = 0.25;
  46. float intensity = 0.9;
  47. float radius = 0.015;
  48. //https://www.shadertoy.com/view/MlKcDD
  49. //Signed distance to a quadratic bezier
  50. float sdBezier(vec2 pos, vec2 A, vec2 B, vec2 C){
  51. vec2 a = B - A;
  52. vec2 b = A - 2.0*B + C;
  53. vec2 c = a * 2.0;
  54. vec2 d = A - pos;
  55. float kk = 1.0 / dot(b,b);
  56. float kx = kk * dot(a,b);
  57. float ky = kk * (2.0*dot(a,a)+dot(d,b)) / 3.0;
  58. float kz = kk * dot(d,a);
  59. float res = 0.0;
  60. float p = ky - kx*kx;
  61. float p3 = p*p*p;
  62. float q = kx*(2.0*kx*kx - 3.0*ky) + kz;
  63. float h = q*q + 4.0*p3;
  64. if(h >= 0.0){
  65. h = sqrt(h);
  66. vec2 x = (vec2(h, -h) - q) / 2.0;
  67. vec2 uv = sign(x)*pow(abs(x), vec2(1.0/3.0));
  68. float t = uv.x + uv.y - kx;
  69. t = clamp( t, 0.0, 1.0 );
  70. // 1 root
  71. vec2 qos = d + (c + b*t)*t;
  72. res = length(qos);
  73. }else{
  74. float z = sqrt(-p);
  75. float v = acos( q/(p*z*2.0) ) / 3.0;
  76. float m = cos(v);
  77. float n = sin(v)*1.732050808;
  78. vec3 t = vec3(m + m, -n - m, n - m) * z - kx;
  79. t = clamp( t, 0.0, 1.0 );
  80. // 3 roots
  81. vec2 qos = d + (c + b*t.x)*t.x;
  82. float dis = dot(qos,qos);
  83. res = dis;
  84. qos = d + (c + b*t.y)*t.y;
  85. dis = dot(qos,qos);
  86. res = min(res,dis);
  87. qos = d + (c + b*t.z)*t.z;
  88. dis = dot(qos,qos);
  89. res = min(res,dis);
  90. res = sqrt( res );
  91. }
  92. return res;
  93. }
  94. //http://mathworld.wolfram.com/HeartCurve.html
  95. vec2 getHeartPosition(float t){
  96. return vec2(16.0 * sin(t) * sin(t) * sin(t),
  97. -(13.0 * cos(t) - 5.0 * cos(2.0*t)
  98. - 2.0 * cos(3.0*t) - cos(4.0*t)));
  99. }
  100. //https://www.shadertoy.com/view/3s3GDn
  101. float getGlow(float dist, float radius, float intensity){
  102. return pow(radius/dist, intensity);
  103. }
  104. float getSegment(float t, vec2 pos, float offset, float scale){
  105. for(int i = 0; i < POINT_COUNT; i++){
  106. points[i] = getHeartPosition(offset + float(i)*len + fract(speed * t) * 6.28);
  107. }
  108. vec2 c = (points[0] + points[1]) / 2.0;
  109. vec2 c_prev;
  110. float dist = 10000.0;
  111. for(int i = 0; i < POINT_COUNT-1; i++){
  112. //https://tinyurl.com/y2htbwkm
  113. c_prev = c;
  114. c = (points[i] + points[i+1]) / 2.0;
  115. dist = min(dist, sdBezier(pos, scale * c_prev, scale * points[i], scale * c));
  116. }
  117. return max(0.0, dist);
  118. }
  119. void main(){
  120. vec2 uv = gl_FragCoord.xy/resolution.xy;
  121. float widthHeightRatio = resolution.x/resolution.y;
  122. vec2 centre = vec2(0.5, 0.5);
  123. vec2 pos = centre - uv;
  124. pos.y /= widthHeightRatio;
  125. //Shift upwards to centre heart
  126. pos.y += 0.02;
  127. float scale = 0.000015 * height;
  128. float t = time;
  129. //Get first segment
  130. float dist = getSegment(t, pos, 0.0, scale);
  131. float glow = getGlow(dist, radius, intensity);
  132. vec3 col = vec3(0.0);
  133. //White core
  134. col += 10.0*vec3(smoothstep(0.003, 0.001, dist));
  135. //Pink glow
  136. col += glow * vec3(0.94,0.14,0.4);
  137. //Get second segment
  138. dist = getSegment(t, pos, 3.4, scale);
  139. glow = getGlow(dist, radius, intensity);
  140. //White core
  141. col += 10.0*vec3(smoothstep(0.003, 0.001, dist));
  142. //Blue glow
  143. col += glow * vec3(0.2,0.6,1.0);
  144. //Tone mapping
  145. col = 1.0 - exp(-col);
  146. //Output to screen
  147. gl_FragColor = vec4(col,1.0);
  148. }
  149. `;
  150. //************** Utility functions **************
  151. window.addEventListener('resize', onWindowResize, false);
  152. function onWindowResize() {
  153. canvas.width = window.innerWidth;
  154. canvas.height = window.innerHeight;
  155. gl.viewport(0, 0, canvas.width, canvas.height);
  156. gl.uniform1f(widthHandle, window.innerWidth);
  157. gl.uniform1f(heightHandle, window.innerHeight);
  158. }
  159. //Compile shader and combine with source
  160. function compileShader(shaderSource, shaderType) {
  161. var shader = gl.createShader(shaderType);
  162. gl.shaderSource(shader, shaderSource);
  163. gl.compileShader(shader);
  164. if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  165. throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
  166. }
  167. return shader;
  168. }
  169. //From https://codepen.io/jlfwong/pen/GqmroZ
  170. //Utility to complain loudly if we fail to find the attribute/uniform
  171. function getAttribLocation(program, name) {
  172. var attributeLocation = gl.getAttribLocation(program, name);
  173. if (attributeLocation === -1) {
  174. throw 'Cannot find attribute ' + name + '.';
  175. }
  176. return attributeLocation;
  177. }
  178. function getUniformLocation(program, name) {
  179. var attributeLocation = gl.getUniformLocation(program, name);
  180. if (attributeLocation === -1) {
  181. throw 'Cannot find uniform ' + name + '.';
  182. }
  183. return attributeLocation;
  184. }
  185. //************** Create shaders **************
  186. //Create vertex and fragment shaders
  187. var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
  188. var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);
  189. //Create shader programs
  190. var program = gl.createProgram();
  191. gl.attachShader(program, vertexShader);
  192. gl.attachShader(program, fragmentShader);
  193. gl.linkProgram(program);
  194. gl.useProgram(program);
  195. //Set up rectangle covering entire canvas
  196. var vertexData = new Float32Array([-1.0, 1.0, // top left
  197. -1.0, -1.0, // bottom left
  198. 1.0, 1.0, // top right
  199. 1.0, -1.0, // bottom right
  200. ]);
  201. //Create vertex buffer
  202. var vertexDataBuffer = gl.createBuffer();
  203. gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
  204. gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
  205. // Layout of our data in the vertex buffer
  206. var positionHandle = getAttribLocation(program, 'position');
  207. gl.enableVertexAttribArray(positionHandle);
  208. gl.vertexAttribPointer(positionHandle,
  209. 2, // position is a vec2 (2 values per component)
  210. gl.FLOAT, // each component is a float
  211. false, // don't normalize values
  212. 2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)
  213. 0 // how many bytes inside the buffer to start from
  214. );
  215. //Set uniform handle
  216. var timeHandle = getUniformLocation(program, 'time');
  217. var widthHandle = getUniformLocation(program, 'width');
  218. var heightHandle = getUniformLocation(program, 'height');
  219. gl.uniform1f(widthHandle, window.innerWidth);
  220. gl.uniform1f(heightHandle, window.innerHeight);
  221. function draw() {
  222. //Update time
  223. time += dt;
  224. //Send uniforms to program
  225. gl.uniform1f(timeHandle, time);
  226. //Draw a triangle strip connecting vertices 0-4
  227. gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  228. requestAnimationFrame(draw);
  229. }
  230. draw();
  231. </script>
  232. </body></html>

效果图如下↓

e6ed515d113e46c89ad8a7b4f7ca5f39.gif

代码二

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Love2</title>
  6. <style>
  7. html,
  8. body {
  9. height: 100%;
  10. padding: 0;
  11. margin: 0;
  12. }
  13. canvas {
  14. position: absolute;
  15. width: 100%;
  16. height: 100%;
  17. background-color: black;
  18. }
  19. .heart {
  20. width: 20px;
  21. height: 20px;
  22. position: absolute;
  23. }
  24. .heart img {
  25. width: 20px;
  26. height: 20px;
  27. }
  28. .main {
  29. text-align: center;
  30. border-radius: 20px;
  31. width: 100%;
  32. height: 60px;
  33. margin: auto;
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. right: 0;
  38. bottom: 0;
  39. }
  40. .main h1{
  41. color: pink;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <canvas id="pinkboard" width="805" height="946">
  47. Canvas Not Support
  48. </canvas>
  49. <div class="main"><h1>Name</h1>></div>
  50. <div class="heart"><img src="Heart.png" /></div>
  51. <div class="heart"><img src="Heart.png" /></div>
  52. <div class="heart"><img src="Heart.png" /></div>
  53. <div class="heart"><img src="Heart.png" /></div>
  54. <div class="heart"><img src="Heart.png" /></div>
  55. <div class="heart"><img src="Heart.png" /></div>
  56. <div class="heart"><img src="Heart.png" /></div>
  57. <div class="heart"><img src="Heart.png" /></div>
  58. <script>
  59. var oDivs = document.querySelectorAll(".heart")
  60. document.onmousemove = function (event) {
  61. var event = event || window.event;
  62. oDivs[0].style.top = event.clientY + "px";
  63. oDivs[0].style.left = event.clientX + "px";
  64. for (var i = oDivs.length - 1; i > 0; i--) {
  65. oDivs[i].style.top = oDivs[i - 1].offsetTop + "px";
  66. oDivs[i].style.left = oDivs[i - 1].offsetLeft + "px";
  67. }
  68. }
  69. document.onmousedown = function (event) {
  70. console.log(new Date().getSeconds());
  71. }
  72. </script>
  73. <script>
  74. /*
  75. * Settings
  76. */
  77. var settings = {
  78. particles: {
  79. length: 500, // maximum amount of particles
  80. duration: 2, // particle duration in sec
  81. velocity: 100, // particle velocity in pixels/sec
  82. effect: -0.75, // play with this for a nice effect
  83. size: 50, // particle size in pixels
  84. },
  85. };
  86. /*
  87. * RequestAnimationFrame polyfill by Erik M?ller
  88. */
  89. (function () {
  90. var b = 0; var c = ["ms", "moz", "webkit", "o"];
  91. for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
  92. window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
  93. window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"]
  94. } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } }
  95. if (!window.cancelAnimationFrame) {
  96. window.cancelAnimationFrame = function (d) {
  97. clearTimeout(d)
  98. }
  99. }
  100. }()
  101. );
  102. /*
  103. * Point class
  104. */
  105. var Point = (function () {
  106. function Point(x, y) {
  107. this.x = (typeof x !== 'undefined') ? x : 0;
  108. this.y = (typeof y !== 'undefined') ? y : 0;
  109. }
  110. Point.prototype.clone = function () {
  111. return new Point(this.x, this.y);
  112. };
  113. Point.prototype.length = function (length) {
  114. if (typeof length == 'undefined')
  115. return Math.sqrt(this.x * this.x + this.y * this.y);
  116. this.normalize();
  117. this.x *= length;
  118. this.y *= length;
  119. return this;
  120. };
  121. Point.prototype.normalize = function () {
  122. var length = this.length();
  123. this.x /= length;
  124. this.y /= length;
  125. return this;
  126. };
  127. return Point;
  128. })();
  129. /*
  130. * Particle class
  131. */
  132. var Particle = (function () {
  133. function Particle() {
  134. this.position = new Point();
  135. this.velocity = new Point();
  136. this.acceleration = new Point();
  137. this.age = 0;
  138. }
  139. Particle.prototype.initialize = function (x, y, dx, dy) {
  140. this.position.x = x;
  141. this.position.y = y;
  142. this.velocity.x = dx;
  143. this.velocity.y = dy;
  144. this.acceleration.x = dx * settings.particles.effect;
  145. this.acceleration.y = dy * settings.particles.effect;
  146. this.age = 0;
  147. };
  148. Particle.prototype.update = function (deltaTime) {
  149. this.position.x += this.velocity.x * deltaTime;
  150. this.position.y += this.velocity.y * deltaTime;
  151. this.velocity.x += this.acceleration.x * deltaTime;
  152. this.velocity.y += this.acceleration.y * deltaTime;
  153. this.age += deltaTime;
  154. };
  155. Particle.prototype.draw = function (context, image) {
  156. function ease(t) {
  157. return (--t) * t * t + 1;
  158. }
  159. var size = image.width * ease(this.age / settings.particles.duration);
  160. context.globalAlpha = 1 - this.age / settings.particles.duration;
  161. context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
  162. };
  163. return Particle;
  164. })();
  165. /*
  166. * ParticlePool class
  167. */
  168. var ParticlePool = (function () {
  169. var particles,
  170. firstActive = 0,
  171. firstFree = 0,
  172. duration = settings.particles.duration;
  173. function ParticlePool(length) {
  174. // create and populate particle pool
  175. particles = new Array(length);
  176. for (var i = 0; i < particles.length; i++)
  177. particles[i] = new Particle();
  178. }
  179. ParticlePool.prototype.add = function (x, y, dx, dy) {
  180. particles[firstFree].initialize(x, y, dx, dy);
  181. // handle circular queue
  182. firstFree++;
  183. if (firstFree == particles.length) firstFree = 0;
  184. if (firstActive == firstFree) firstActive++;
  185. if (firstActive == particles.length) firstActive = 0;
  186. };
  187. ParticlePool.prototype.update = function (deltaTime) {
  188. var i;
  189. // update active particles
  190. if (firstActive < firstFree) {
  191. for (i = firstActive; i < firstFree; i++)
  192. particles[i].update(deltaTime);
  193. }
  194. if (firstFree < firstActive) {
  195. for (i = firstActive; i < particles.length; i++)
  196. particles[i].update(deltaTime);
  197. for (i = 0; i < firstFree; i++)
  198. particles[i].update(deltaTime);
  199. }
  200. // remove inactive particles
  201. while (particles[firstActive].age >= duration && firstActive != firstFree) {
  202. firstActive++;
  203. if (firstActive == particles.length) firstActive = 0;
  204. }
  205. };
  206. ParticlePool.prototype.draw = function (context, image) {
  207. // draw active particles
  208. if (firstActive < firstFree) {
  209. for (i = firstActive; i < firstFree; i++)
  210. particles[i].draw(context, image);
  211. }
  212. if (firstFree < firstActive) {
  213. for (i = firstActive; i < particles.length; i++)
  214. particles[i].draw(context, image);
  215. for (i = 0; i < firstFree; i++)
  216. particles[i].draw(context, image);
  217. }
  218. };
  219. return ParticlePool;
  220. })();
  221. /*
  222. * Putting it all together
  223. */
  224. (function (canvas) {
  225. var context = canvas.getContext('2d'),
  226. particles = new ParticlePool(settings.particles.length),
  227. particleRate = settings.particles.length / settings.particles.duration, // particles/sec
  228. time;
  229. // get point on heart with -PI <= t <= PI
  230. function pointOnHeart(t) {
  231. return new Point(
  232. 160 * Math.pow(Math.sin(t), 3),
  233. 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
  234. );
  235. }
  236. // creating the particle image using a dummy canvas
  237. var image = (function () {
  238. var canvas = document.createElement('canvas'),
  239. context = canvas.getContext('2d');
  240. canvas.width = settings.particles.size;
  241. canvas.height = settings.particles.size;
  242. // helper function to create the path
  243. function to(t) {
  244. var point = pointOnHeart(t);
  245. point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
  246. point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
  247. return point;
  248. }
  249. // create the path
  250. context.beginPath();
  251. var t = -Math.PI;
  252. var point = to(t);
  253. context.moveTo(point.x, point.y);
  254. while (t < Math.PI) {
  255. t += 0.01; // baby steps!
  256. point = to(t);
  257. context.lineTo(point.x, point.y);
  258. }
  259. context.closePath();
  260. // create the fill
  261. context.fillStyle = '#ea80b0';
  262. context.fill();
  263. // create the image
  264. var image = new Image();
  265. image.src = canvas.toDataURL();
  266. return image;
  267. })();
  268. // render that thing!
  269. function render() {
  270. // next animation frame
  271. requestAnimationFrame(render);
  272. // update time
  273. var newTime = new Date().getTime() / 1000,
  274. deltaTime = newTime - (time || newTime);
  275. time = newTime;
  276. // clear canvas
  277. context.clearRect(0, 0, canvas.width, canvas.height);
  278. // create new particles
  279. var amount = particleRate * deltaTime;
  280. for (var i = 0; i < amount; i++) {
  281. var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
  282. var dir = pos.clone().length(settings.particles.velocity);
  283. particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
  284. }
  285. // update and draw particles
  286. particles.update(deltaTime);
  287. particles.draw(context, image);
  288. }
  289. // handle (re-)sizing of the canvas
  290. function onResize() {
  291. canvas.width = canvas.clientWidth;
  292. canvas.height = canvas.clientHeight;
  293. }
  294. window.onresize = onResize;
  295. // delay rendering bootstrap
  296. setTimeout(function () {
  297. onResize();
  298. render();
  299. }, 10);
  300. })(document.getElementById('pinkboard'));
  301. </script>
  302. </body>
  303. </html>

效果图如下↓

a748186dea58425c9a16e8b1392e80df.gif上图中的“Name”可自定义,方法如下: 2dd0b0091bfa4b6dbd8c5a477f3791d7.png

代码来自网络,感觉好多人想要,但博主又不能及时的一个一个回复,我拿到了,就分享给大家。

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

闽ICP备14008679号