Code Trái Tim Của Thủ Khoa Lý

Code Trái Tim Của Thủ Khoa Lý
Video code trái tim của thủ khoa lý

Gần đây mạng xã hội truyền tai nhau thông tin về code trái tim đập tỏ tình với crush rất đẹp mắt, xuất phát từ bộ phim Thắp sáng Anh, sưởi ấm Em của Trung Quốc. Ngay sau khi hình ảnh trái tim đập lên sóng, không chỉ dân IT mà rất nhiều bạn trẻ cũng tò mò về code trái tim đập này để có thể tỏ tình với crush của mình. Nếu bạn không rành về code và không phải dân IT thì chỉ cần thực hiện theo bài viết dưới đây để có thể làm code trái tim đập của Thủ Khoa Lý rất đơn giản nhé.

Tải Code trái tim đập chèn hình ảnh

Ngoài code trái tim đập bình thường hay có chữ bên trong thì bạn có thể thử với code chèn hình ảnh, sử dụng ảnh của đối phương hoặc ảnh của 2 người chèn vào hình trái tim với hiệu ứng tim đập và ánh sáng xung quanh. Nếu bạn thích kiểu trái tim đập chèn ảnh thì có thể tham khảo cách tạo code trái tim đập dưới đây.

Bước 1:

Đầu tiên bạn truy cập vào link dưới đây để tải thư mục code trái tim đập chèn hình ảnh xuống máy tính. Tiếp đến chúng ta sẽ giải nén tập tin như bình thường.

https://drive.google.com/file/d/1sOWvnQvfElynPpPWoqrDXTyoKW4m1RB9/view?usp=share_link

Bước 2:

Tiếp đến để chèn ảnh vào hình trái tim thì bạn sẽ chuyển file hình ảnh vào cùng thư mục chứa code trái tim này. Như vậy khi chỉnh sửa code chèn ảnh mới thực hiện được.

Chuyển hình ảnh vào thư mục code trái tim đập

Bước 3.

Chúng ta sẽ copy tên ảnh và xem định dạng của ảnh là gì để chèn vào trong code.

Copy tên ảnh

Bước 4:

Nhấn chuột phải vào file index.html rồi chọn Notepad để mở hoặc dùng công cụ đọc file HTML mà bạn đang cài trên máy tính nếu có.

Mở file html

Bước 5:

Chúng ta sẽ tiến hành chỉnh sửa code theo ý mình. Tại EDIT HERE sẽ chỉnh sửa nội dung hiển thị trong trái tim. STARDUST1 có thể chỉnh sửa năm nếu muốn.

Tại STARDUST2 bạn điền tên của bạn và người đó nhé. STARDUST3 có thể thay đổi Love You thành dòng khác tùy bạn.

Dòng img sẽ điền tên và định dạng của ảnh cần chèn vào giữa như hình là được.

Thay đổi code trái tim đập

Bước 6:

Cuối cùng nhấn File chọn Save để lưu lại thành quả là xong.

Lưu code mới

Bây giờ bạn mở file HTML như bình thường để xem code trái tim đập có ảnh như nào.

Code trái tim đập chèn ảnh

Video tạo code trái tim đập thủ khoa Lý chèn ảnh

Tải code trái tim đập của Thủ Khoa Lý có tên

Đoạn mã code trái tim đập dưới đây có chữ hiển thị bên trong và có thể chỉnh sửa theo ý bạn.

  • Chỉnh sửa code trái tim đập có tên online

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> Heart </TITLE> <META NAME=”Generator” CONTENT=”EditPlus”> <META NAME=”Author” CONTENT=””> <META NAME=”Keywords” CONTENT=””> <META NAME=”Description” CONTENT=””> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; display: flex; justify-content: center; align-items: center; } .box { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; } canvas { position: absolute; width: 100%; height: 100%; } #pinkboard { position: relative; margin: auto; height: 500px; width: 500px; animation: animate 1.3s infinite; } #pinkboard:before, #pinkboard:after { content: ”; position: absolute; background: #FF5CA4; width: 100px; height: 160px; border-top-left-radius: 50px; border-top-right-radius: 50px; } #pinkboard:before { left: 100px; transform: rotate(-45deg); transform-origin: 0 100%; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } #pinkboard:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes animate { 0% { transform: scale(1); } 30% { transform: scale(.8); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> </HEAD> <BODY> <div class=”box”> <canvas id=”pinkboard”></canvas> </div> <script> /* * Settings */ var settings = { particles: { length: 2000, // maximum amount of particles duration: 2, // particle duration in sec velocity: 100, // particle velocity in pixels/sec effect: -1.3, // play with this for a nice effect size: 13, // particle size in pixels }, }; /* * RequestAnimationFrame polyfill by Erik Möller */ (function(){var b=0;var c=[“ms”,”moz”,”webkit”,”o”];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+”RequestAnimationFrame”];window.cancelAnimationFrame=window[c[a]+”CancelAnimationFrame”]||window[c[a]+”CancelRequestAnimationFrame”]}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}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}()); /* * Point class */ var Point = (function() { function Point(x, y) { this.x = (typeof x !== ‘undefined’) ? x : 0; this.y = (typeof y !== ‘undefined’) ? y : 0; } Point.prototype.clone = function() { return new Point(this.x, this.y); }; Point.prototype.length = function(length) { if (typeof length == ‘undefined’) return Math.sqrt(this.x * this.x + this.y * this.y); this.normalize(); this.x *= length; this.y *= length; return this; }; Point.prototype.normalize = function() { var length = this.length(); this.x /= length; this.y /= length; return this; }; return Point; })(); /* * Particle class */ var Particle = (function() { function Particle() { this.position = new Point(); this.velocity = new Point(); this.acceleration = new Point(); this.age = 0; } Particle.prototype.initialize = function(x, y, dx, dy) { this.position.x = x; this.position.y = y; this.velocity.x = dx; this.velocity.y = dy; this.acceleration.x = dx * settings.particles.effect; this.acceleration.y = dy * settings.particles.effect; this.age = 0; }; Particle.prototype.update = function(deltaTime) { this.position.x += this.velocity.x * deltaTime; this.position.y += this.velocity.y * deltaTime; this.velocity.x += this.acceleration.x * deltaTime; this.velocity.y += this.acceleration.y * deltaTime; this.age += deltaTime; }; Particle.prototype.draw = function(context, image) { function ease(t) { return (-t) * t * t + 1; } var size = image.width * ease(this.age / settings.particles.duration); context.globalAlpha = 1 – this.age / settings.particles.duration; context.drawImage(image, this.position.x – size / 2, this.position.y – size / 2, size, size); }; return Particle; })(); /* * ParticlePool class */ var ParticlePool = (function() { var particles, firstActive = 0, firstFree = 0, duration = settings.particles.duration; function ParticlePool(length) { // create and populate particle pool particles = new Array(length); for (var i = 0; i < particles.length; i++) particles[i] = new Particle(); } ParticlePool.prototype.add = function(x, y, dx, dy) { particles[firstFree].initialize(x, y, dx, dy); // handle circular queue firstFree++; if (firstFree == particles.length) firstFree = 0; if (firstActive == firstFree ) firstActive++; if (firstActive == particles.length) firstActive = 0; }; ParticlePool.prototype.update = function(deltaTime) { var i; // update active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].update(deltaTime); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].update(deltaTime); for (i = 0; i < firstFree; i++) particles[i].update(deltaTime); } // remove inactive particles while (particles[firstActive].age >= duration && firstActive != firstFree) { firstActive++; if (firstActive == particles.length) firstActive = 0; } }; ParticlePool.prototype.draw = function(context, image) { // draw active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].draw(context, image); for (i = 0; i < firstFree; i++) particles[i].draw(context, image); } }; return ParticlePool; })(); /* * Putting it all together */ (function(canvas) { var context = canvas.getContext(‘2d’), particles = new ParticlePool(settings.particles.length), particleRate = settings.particles.length / settings.particles.duration, // particles/sec time; // get point on heart with -PI <= t <= PI function pointOnHeart(t) { return new Point( 160 * Math.pow(Math.sin(t), 3), 130 * Math.cos(t) – 50 * Math.cos(2 * t) – 20 * Math.cos(3 * t) – 10 * Math.cos(4 * t) + 25 ); } // creating the particle image using a dummy canvas var image = (function() { var canvas = document.createElement(‘canvas’), context = canvas.getContext(‘2d’); canvas.width = settings.particles.size; canvas.height = settings.particles.size; // helper function to create the path function to(t) { var point = pointOnHeart(t); point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350; point.y = settings.particles.size / 2 – point.y * settings.particles.size / 350; return point; } // create the path context.beginPath(); var t = -Math.PI; var point = to(t); context.moveTo(point.x, point.y); while (t < Math.PI) { t += 0.01; // baby steps! point = to(t); context.lineTo(point.x, point.y); } context.closePath(); // create the fill context.fillStyle = ‘#FF5CA4’; context.fill(); // create the image var image = new Image(); image.src = canvas.toDataURL(); return image; })(); // render that thing! function render() { // next animation frame requestAnimationFrame(render); // update time var newTime = new Date().getTime() / 1000, deltaTime = newTime – (time || newTime); time = newTime; // clear canvas context.clearRect(0, 0, canvas.width, canvas.height); // create new particles var amount = particleRate * deltaTime; for (var i = 0; i < amount; i++) { var pos = pointOnHeart(Math.PI – 2 * Math.PI * Math.random()); var dir = pos.clone().length(settings.particles.velocity); particles.add(canvas.width / 2 + pos.x, canvas.height / 2 – pos.y, dir.x, -dir.y); } // update and draw particles particles.update(deltaTime); particles.draw(context, image); } // handle (re-)sizing of the canvas function onResize() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; } window.onresize = onResize; // delay rendering bootstrap setTimeout(function() { onResize(); render(); }, 10); })(document.getElementById(‘pinkboard’)); </script> <div class=”center-text”, style=”background-color:rgb(0, 0, 0); width: 100%; color: rgb(225, 12, 168); height:100%; font-size: 31px; font-style: italic; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; text-align: center;”>Anh Yêu Em</div> </BODY> </HTML>

Tải code trái tim đập của Thủ Khoa Lý

Nếu bạn không thích code trái tim đập có chữ hiện bên trong thì có thể dùng đoạn code trái tim đập thông thường dưới đây.

  • Chỉnh sửa code trái tim đập không tên

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME=”Generator” CONTENT=”EditPlus”> <META NAME=”Author” CONTENT=””> <META NAME=”Keywords” CONTENT=””> <META NAME=”Description” CONTENT=””> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } </style> </HEAD> <BODY> <canvas id=”pinkboard”></canvas> <script> /* * Settings */ var settings = { particles: { length: 500, // maximum amount of particles duration: 2, // particle duration in sec velocity: 100, // particle velocity in pixels/sec effect: -0.75, // play with this for a nice effect size: 30, // particle size in pixels }, }; /* * RequestAnimationFrame polyfill by Erik Möller */ (function(){var b=0;var c=[“ms”,”moz”,”webkit”,”o”];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+”RequestAnimationFrame”];window.cancelAnimationFrame=window[c[a]+”CancelAnimationFrame”]||window[c[a]+”CancelRequestAnimationFrame”]}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}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}()); /* * Point class */ var Point = (function() { function Point(x, y) { this.x = (typeof x !== ‘undefined’) ? x : 0; this.y = (typeof y !== ‘undefined’) ? y : 0; } Point.prototype.clone = function() { return new Point(this.x, this.y); }; Point.prototype.length = function(length) { if (typeof length == ‘undefined’) return Math.sqrt(this.x * this.x + this.y * this.y); this.normalize(); this.x *= length; this.y *= length; return this; }; Point.prototype.normalize = function() { var length = this.length(); this.x /= length; this.y /= length; return this; }; return Point; })(); /* * Particle class */ var Particle = (function() { function Particle() { this.position = new Point(); this.velocity = new Point(); this.acceleration = new Point(); this.age = 0; } Particle.prototype.initialize = function(x, y, dx, dy) { this.position.x = x; this.position.y = y; this.velocity.x = dx; this.velocity.y = dy; this.acceleration.x = dx * settings.particles.effect; this.acceleration.y = dy * settings.particles.effect; this.age = 0; }; Particle.prototype.update = function(deltaTime) { this.position.x += this.velocity.x * deltaTime; this.position.y += this.velocity.y * deltaTime; this.velocity.x += this.acceleration.x * deltaTime; this.velocity.y += this.acceleration.y * deltaTime; this.age += deltaTime; }; Particle.prototype.draw = function(context, image) { function ease(t) { return (-t) * t * t + 1; } var size = image.width * ease(this.age / settings.particles.duration); context.globalAlpha = 1 – this.age / settings.particles.duration; context.drawImage(image, this.position.x – size / 2, this.position.y – size / 2, size, size); }; return Particle; })(); /* * ParticlePool class */ var ParticlePool = (function() { var particles, firstActive = 0, firstFree = 0, duration = settings.particles.duration; function ParticlePool(length) { // create and populate particle pool particles = new Array(length); for (var i = 0; i < particles.length; i++) particles[i] = new Particle(); } ParticlePool.prototype.add = function(x, y, dx, dy) { particles[firstFree].initialize(x, y, dx, dy); // handle circular queue firstFree++; if (firstFree == particles.length) firstFree = 0; if (firstActive == firstFree ) firstActive++; if (firstActive == particles.length) firstActive = 0; }; ParticlePool.prototype.update = function(deltaTime) { var i; // update active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].update(deltaTime); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].update(deltaTime); for (i = 0; i < firstFree; i++) particles[i].update(deltaTime); } // remove inactive particles while (particles[firstActive].age >= duration && firstActive != firstFree) { firstActive++; if (firstActive == particles.length) firstActive = 0; } }; ParticlePool.prototype.draw = function(context, image) { // draw active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].draw(context, image); for (i = 0; i < firstFree; i++) particles[i].draw(context, image); } }; return ParticlePool; })(); /* * Putting it all together */ (function(canvas) { var context = canvas.getContext(‘2d’), particles = new ParticlePool(settings.particles.length), particleRate = settings.particles.length / settings.particles.duration, // particles/sec time; // get point on heart with -PI <= t <= PI function pointOnHeart(t) { return new Point( 160 * Math.pow(Math.sin(t), 3), 130 * Math.cos(t) – 50 * Math.cos(2 * t) – 20 * Math.cos(3 * t) – 10 * Math.cos(4 * t) + 25 ); } // creating the particle image using a dummy canvas var image = (function() { var canvas = document.createElement(‘canvas’), context = canvas.getContext(‘2d’); canvas.width = settings.particles.size; canvas.height = settings.particles.size; // helper function to create the path function to(t) { var point = pointOnHeart(t); point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350; point.y = settings.particles.size / 2 – point.y * settings.particles.size / 350; return point; } // create the path context.beginPath(); var t = -Math.PI; var point = to(t); context.moveTo(point.x, point.y); while (t < Math.PI) { t += 0.01; // baby steps! point = to(t); context.lineTo(point.x, point.y); } context.closePath(); // create the fill context.fillStyle = ‘#ea80b0’; context.fill(); // create the image var image = new Image(); image.src = canvas.toDataURL(); return image; })(); // render that thing! function render() { // next animation frame requestAnimationFrame(render); // update time var newTime = new Date().getTime() / 1000, deltaTime = newTime – (time || newTime); time = newTime; // clear canvas context.clearRect(0, 0, canvas.width, canvas.height); // create new particles var amount = particleRate * deltaTime; for (var i = 0; i < amount; i++) { var pos = pointOnHeart(Math.PI – 2 * Math.PI * Math.random()); var dir = pos.clone().length(settings.particles.velocity); particles.add(canvas.width / 2 + pos.x, canvas.height / 2 – pos.y, dir.x, -dir.y); } // update and draw particles particles.update(deltaTime); particles.draw(context, image); } // handle (re-)sizing of the canvas function onResize() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; } window.onresize = onResize; // delay rendering bootstrap setTimeout(function() { onResize(); render(); }, 10); })(document.getElementById(‘pinkboard’)); </script> </BODY> </HTML>

Code trái tim đập tia sáng nghệ thuật

Code trái tim đập này sẽ khác với 2 kiểu trái tim bên trên khi có thêm những tia sáng bao xung quanh đẹp mắt hơn rất nhiều.

  • Chỉnh sửa code trái tim đập tia sáng

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); } </style> </head> <body> <canvas id=”heart”></canvas> <script> window.requestAnimationFrame = window.__requestAnimationFrame || window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || (function () { return function (callback, element) { var lastTime = element.__lastTime; if (lastTime === undefined) { lastTime = 0; } var currTime = Date.now(); var timeToCall = Math.max(1, 33 – (currTime – lastTime)); window.setTimeout(callback, timeToCall); element.__lastTime = currTime + timeToCall; }; })(); window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase())); var loaded = false; var init = function () { if (loaded) return; loaded = true; var mobile = window.isDevice; var koef = mobile ? 0.5 : 1; var canvas = document.getElementById(‘heart’); var ctx = canvas.getContext(‘2d’); var width = canvas.width = koef * innerWidth; var height = canvas.height = koef * innerHeight; var rand = Math.random; ctx.fillStyle = “rgba(0,0,0,1)”; ctx.fillRect(0, 0, width, height); var heartPosition = function (rad) { //return [Math.sin(rad), Math.cos(rad)]; 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))]; }; var scaleAndTranslate = function (pos, sx, sy, dx, dy) { return [dx + pos[0] * sx, dy + pos[1] * sy]; }; window.addEventListener(‘resize’, function () { width = canvas.width = koef * innerWidth; height = canvas.height = koef * innerHeight; ctx.fillStyle = “rgba(0,0,0,1)”; ctx.fillRect(0, 0, width, height); }); var traceCount = mobile ? 20 : 50; var pointsOrigin = []; var i; var dr = mobile ? 0.3 : 0.1; for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0)); for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0)); for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0)); var heartPointsCount = pointsOrigin.length; var targetPoints = []; var pulse = function (kx, ky) { for (i = 0; i < pointsOrigin.length; i++) { targetPoints[i] = []; targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2; targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2; } }; var e = []; for (i = 0; i < heartPointsCount; i++) { var x = rand() * width; var y = rand() * height; e[i] = { vx: 0, vy: 0, R: 2, speed: rand() + 5, q: ~~(rand() * heartPointsCount), D: 2 * (i % 2) – 1, force: 0.2 * rand() + 0.7, f: “hsla(0,” + ~~(40 * rand() + 60) + “%,” + ~~(60 * rand() + 20) + “%,.3)”, trace: [] }; for (var k = 0; k < traceCount; k++) e[i].trace[k] = { x: x, y: y }; } var config = { traceK: 0.4, timeDelta: 0.01 }; var time = 0; var loop = function () { var n = -Math.cos(time); pulse((1 + n) * .5, (1 + n) * .5); time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta; ctx.fillStyle = “rgba(0,0,0,.1)”; ctx.fillRect(0, 0, width, height); for (i = e.length; i-;) { var u = e[i]; var q = targetPoints[u.q]; var dx = u.trace[0].x – q[0]; var dy = u.trace[0].y – q[1]; var length = Math.sqrt(dx * dx + dy * dy); if (10 > length) { if (0.95 < rand()) { u.q = ~~(rand() * heartPointsCount); } else { if (0.99 < rand()) { u.D *= -1; } u.q += u.D; u.q %= heartPointsCount; if (0 > u.q) { u.q += heartPointsCount; } } } u.vx += -dx / length * u.speed; u.vy += -dy / length * u.speed; u.trace[0].x += u.vx; u.trace[0].y += u.vy; u.vx *= u.force; u.vy *= u.force; for (k = 0; k < u.trace.length – 1;) { var T = u.trace[k]; var N = u.trace[++k]; N.x -= config.traceK * (N.x – T.x); N.y -= config.traceK * (N.y – T.y); } ctx.fillStyle = u.f; for (k = 0; k < u.trace.length; k++) { ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1); } } //ctx.fillStyle = “rgba(255,255,255,1)”; //for (i = u.trace.length; i-;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2); window.requestAnimationFrame(loop, canvas); }; loop(); }; var s = document.readyState; if (s === ‘complete’ || s === ‘loaded’ || s === ‘interactive’) init(); else document.addEventListener(‘DOMContentLoaded’, init, false); </script> </body> </html>

Tải code trái tim đập màu đỏ

  • Chỉnh sửa code trái tim màu đỏ

Thêm một mã code trái tim đập để bạn tải và gửi cho crush của mình. Trái tim đập của đoạn code này có màu đỏ, xung quanh tỏa ra những trái tim nhỏ khác rất đẹp mắt.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> MINH IT </TITLE> <META NAME=”Generator” CONTENT=”EditPlus”> <META NAME=”Author” CONTENT=””> <META NAME=”Keywords” CONTENT=””> <META NAME=”Description” CONTENT=””> <link rel=”stylesheet” href=”style.css”> <style> html, body { height: 100%; padding: 0; margin: 0; background: rgba(0, 0, 0, 0.851); } canvas { position: absolute; width: 100%; height: 100%; } </style> </HEAD> <BODY> <div class=”box”> <canvas id=”pinkboard”></canvas> </div> <script> var settings = { particles: { length: 10000, // maximum amount of particles duration: 4, // particle duration in sec velocity: 80, // particle velocity in pixels/sec effect: -1.3, // play with this for a nice effect size: 8, // particle size in pixels }, }; /* */ (function(){var b=0;var c=[“ms”,”moz”,”webkit”,”o”];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+”RequestAnimationFrame”];window.cancelAnimationFrame=window[c[a]+”CancelAnimationFrame”]||window[c[a]+”CancelRequestAnimationFrame”]}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}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}()); /* * Point class */ var Point = (function() { function Point(x, y) { this.x = (typeof x !== ‘undefined’) ? x : 0; this.y = (typeof y !== ‘undefined’) ? y : 0; } Point.prototype.clone = function() { return new Point(this.x, this.y); }; Point.prototype.length = function(length) { if (typeof length == ‘undefined’) return Math.sqrt(this.x * this.x + this.y * this.y); this.normalize(); this.x *= length; this.y *= length; return this; }; Point.prototype.normalize = function() { var length = this.length(); this.x /= length; this.y /= length; return this; }; return Point; })(); /* * Particle class */ var Particle = (function() { function Particle() { this.position = new Point(); this.velocity = new Point(); this.acceleration = new Point(); this.age = 0; } Particle.prototype.initialize = function(x, y, dx, dy) { this.position.x = x; this.position.y = y; this.velocity.x = dx; this.velocity.y = dy; this.acceleration.x = dx * settings.particles.effect; this.acceleration.y = dy * settings.particles.effect; this.age = 0; }; Particle.prototype.update = function(deltaTime) { this.position.x += this.velocity.x * deltaTime; this.position.y += this.velocity.y * deltaTime; this.velocity.x += this.acceleration.x * deltaTime; this.velocity.y += this.acceleration.y * deltaTime; this.age += deltaTime; }; Particle.prototype.draw = function(context, image) { function ease(t) { return (-t) * t * t + 1; } var size = image.width * ease(this.age / settings.particles.duration); context.globalAlpha = 1 – this.age / settings.particles.duration; context.drawImage(image, this.position.x – size / 2, this.position.y – size / 2, size, size); }; return Particle; })(); /* * ParticlePool class */ var ParticlePool = (function() { var particles, firstActive = 0, firstFree = 0, duration = settings.particles.duration; function ParticlePool(length) { // create and populate particle pool particles = new Array(length); for (var i = 0; i < particles.length; i++) particles[i] = new Particle(); } ParticlePool.prototype.add = function(x, y, dx, dy) { particles[firstFree].initialize(x, y, dx, dy); // handle circular queue firstFree++; if (firstFree == particles.length) firstFree = 0; if (firstActive == firstFree ) firstActive++; if (firstActive == particles.length) firstActive = 0; }; ParticlePool.prototype.update = function(deltaTime) { var i; // update active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].update(deltaTime); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].update(deltaTime); for (i = 0; i < firstFree; i++) particles[i].update(deltaTime); } // remove inactive particles while (particles[firstActive].age >= duration && firstActive != firstFree) { firstActive++; if (firstActive == particles.length) firstActive = 0; } }; ParticlePool.prototype.draw = function(context, image) { // draw active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].draw(context, image); for (i = 0; i < firstFree; i++) particles[i].draw(context, image); } }; return ParticlePool; })(); /* * Putting it all together */ (function(canvas) { var context = canvas.getContext(‘2d’), particles = new ParticlePool(settings.particles.length), particleRate = settings.particles.length / settings.particles.duration, // particles/sec time; // get point on heart with -PI <= t <= PI function pointOnHeart(t) { return new Point( 160 * Math.pow(Math.sin(t), 3), 130 * Math.cos(t) – 50 * Math.cos(2 * t) – 20 * Math.cos(3 * t) – 10 * Math.cos(4 * t) + 25 ); } // creating the particle image using a dummy canvas var image = (function() { var canvas = document.createElement(‘canvas’), context = canvas.getContext(‘2d’); canvas.width = settings.particles.size; canvas.height = settings.particles.size; // helper function to create the path function to(t) { var point = pointOnHeart(t); point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350; point.y = settings.particles.size / 2 – point.y * settings.particles.size / 350; return point; } // create the path context.beginPath(); var t = -Math.PI; var point = to(t); context.moveTo(point.x, point.y); while (t < Math.PI) { t += 0.01; // baby steps! point = to(t); context.lineTo(point.x, point.y); } context.closePath(); // create the fill context.fillStyle = ‘#f50b02’; context.fill(); // create the image var image = new Image(); image.src = canvas.toDataURL(); return image; })(); // render that thing! function render() { // next animation frame requestAnimationFrame(render); // update time var newTime = new Date().getTime() / 1000, deltaTime = newTime – (time || newTime); time = newTime; // clear canvas context.clearRect(0, 0, canvas.width, canvas.height); // create new particles var amount = particleRate * deltaTime; for (var i = 0; i < amount; i++) { var pos = pointOnHeart(Math.PI – 2 * Math.PI * Math.random()); var dir = pos.clone().length(settings.particles.velocity); particles.add(canvas.width / 2 + pos.x, canvas.height / 2 – pos.y, dir.x, -dir.y); } // update and draw particles particles.update(deltaTime); particles.draw(context, image); } // handle (re-)sizing of the canvas function onResize() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; } window.onresize = onResize; // delay rendering bootstrap setTimeout(function() { onResize(); render(); }, 10); })(document.getElementById(‘pinkboard’)); </script> </BODY> </HTML>

Cách làm code trái tim đập của Thủ Khoa Lý

Bước 1:

Trước hết bạn sao chép đoạn code bên trên về máy tính như bình thường nhé. Sau đó chúng ta mở đoạn mã code này bằng Notepad. Ở đây sẽ chọn đoạn mã code có phần chữ hiển thị trong trái tim để bạn chỉnh sửa nếu muốn.

Bước 2:

Sau đó chúng ta sẽ mở đoạn code này rồi tiến hành chỉnh sửa lại nội dung trong code. Bạn kéo xuống bên dưới sẽ có tùy chọn thay đổi lại nội dung chữ hiển thị trong hình trái tim. Chúng ta điền nội dung nào mà mình muốn vào trong dòng code này đều được nhé. Bạn cũng có thể đổi cỡ chữ tại dòng font-size theo ý mình nhé.

Thay đổi nội dung trong hình trái tim đập

Bước 3:

Sau đó nhấn File chọn Save As để lưu lại thành 1 file mới html như hình dưới đây.

Lưu code trái tim đập

Vậy là xong. Bạn chỉ cần mở file code mới lưu này để xem thành quả code trái tim đập như thế nào. Để tặng trái tim đập này cho crush của mình thì gửi file code html là được.

Code trái tim đập