
code trái tim đập của thủ khoa Lý
Code Trái Tim của Thủ Khoa Lý Mới gần đây, cộng đồng mạng Trung Quốc vừa bùng nổ trend code hình trái tim của thủ khoa Lý trong phim “THẮP SÁNG ANH, SƯỞI ẤM EM”. Được biết cảnh tỏ tình siêu ngầu này xuất hiện trong tập 5 của bộ phim “Thắp sáng anh, sưởi ấm em” (Chiếc bật lửa và váy công chúa). tuy nhiên việc đú trend Code Trái Tim của Thủ Khoa Lý như thế nào vẫn còn các bạn hỏi rất nhiều thì Lazatda.vn xin hướng dẫn chi tiết dưới đây nhé !
Nội dung bài viết
Code Trái Tim của Thủ Khoa Lý là gì ?
NETIZEN Trung ruốc đang đua nhau đú TREND Trái tim của THỦ KHOA LÝ trong bộ phim “THẮP SÁNG ANH, SƯỞI ẤM EM .

Cụ thể là trong tập 5 của phim Thắp sáng anh, sưởi ấm em trong đó có một cảnh mà Lý Tuân đã vẽ một trái tim màu hồng lấp lánh chuyển động nở hoa rất đẹp và ý nghĩa bằng một đoạn code cho Chu Vân rồi bắt cô tự giải mã đã khiến dân tình cong kéo về vấn đề này và rất nhiều người đang đi tìm thắp sáng anh sưởi ấm em code trái tim.
Trend tạo trái tim bằng code này đãng được rất nhiều các bạn trẻ bên trung quốc đú theo bên Douyinvà ở Việ Nam cũng thế vậy hãy theo dõi hướng dẫn bên dưới đây nhé .
Hướng dẫn làm Source Code Trái Tim của Thủ Khoa Lý
Bước 1 : Đầu tiên các bạn phải có mã Code và dưới đây là mã :
Nếu các bạn không copy được code thì để lại cmt dưới mình gửi code
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
/*
* 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 /* * 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’)); Bạn làm theo những bước dưới đây nhé. Bước 1: Đầu tiên bạn tải đoạn code dưới đây về máy tính, sau đó mở đoạn code bằng Notepad. Trong đoạn code dưới đây sẽ có phần chữ hiển thị trong trái tim để bạn có thể chỉnh sửa. Bước 2: Sau khi tải về bạn mở đoạn code để chỉnh sửa 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 phần chữ “Anh yêu em”. 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é. 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. 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 người thương của mình thì gửi file 1.html là được. Bạn cũng có thể chủ động đổi màu trái tim và phông nền của đoạn code trên theo hướng dẫn sau: – Đổi màu nền: Chọn mã màu/tra trên bảng màu html để tìm mã màu mong muốn sau đó tìm đến đoạn code background: #CCE46B;”, thay sang mã màu bạn vừa tìm. – Đổi màu trái tim: Bạn cũng tìm mã màu mình thích như với màu nền, rồi tìm trong đoạn code dòng “context.fillStyle = ‘#000000’;”, Đổi lại là xong. Dán Code Trái Tim của Thủ Khoa lý vào bên trái Bước 4 : Ấn Run Và kết quả : Để thuận tiện các bạn có thể xem file code trái tim của thủ khoa lý ở đây file đầy đủ code trái tim thủ khoa lý hiệu ứng đẹp nhất :CÁCH 1. Làm code trái tim đập thủ khoa Lý
2. Cách Đổi màu Code Trái Tim thế nào?
CÁCH 2: Sau khi có được mã code các bạn vào trang này :
File code trái tim của thủ khoa lý
Video hướng dẫn thắp sáng anh sưởi ấm em code trái tim