Hướng dẫn 10+ cách làm code trái tim như của thủ khoa Lý cực dễ

Bạn đang xem: Hướng dẫn 10+ cách làm code trái tim như của thủ khoa Lý cực dễ tại vietabinhdinh.edu.vn

Mới đây, những đoạn code trái tim của Thủ Khoa Lý cực cute mà lại lãng mạn và đầy tinh tế có nguồn gốc từ phim Thắp sáng Anh, sưởi ấm Em. Sau khi phim ra mắt, rất nhiều các cư dân mạng mà không chỉ có dân IT quan tâm và muốn làm theo đoạn code này. Cùng xem ngay 10+ cách làm siêu dễ ngay dưới đây.

1. Cách làm Code trái tim đập chèn hình ảnh

Bên cạnh code hình trái tim thông thường hoặc có thêm chữ bên trong, mọi người có thể dùng code trái tim có chèn hình ảnh. Còn gì tuyệt hơn khi bạn chèn thêm hình ảnh của mình và nửa kia với hiệu ứng đập liên tục và phát sáng xung quanh. Dưới đây chính là từng bước thực hiện chi tiết nhất cho bạn.

Bước 1: Trước tiên, mọi người truy cập vào đường liên kết ở phía dưới để tải về thư mục của code trái tim đập có chèn hình ảnh về trên máy. Sau khi download, các bạn tiến hành giải nén file đó.

Tải file và giải nén

Bước 2: Kế tiếp, mọi người hãy di chuyển file hình ảnh mình cần vào chung với thư mục có chứa code trái tim để chèn ảnh vào trái tim. Lúc đó, khi chúng ta điều chỉnh code thì chèn ảnh mới thành công.

Di chuyển file

Bước 3: Sau đó, bạn hãy sao chép tên của hình ảnh rồi xem định dạng của nó là gì để có thể chèn vô code.

Tên và định dạng hình ảnh

Bước 4: Click chuột phải vô file index.html > Chọn vào Notepad để mở file hay sử dụng công cụ đọc file HTML mà bạn đã cài sẵn trên máy tính (nếu có).

Mở bằng Notepad

Bước 5: Tiếp theo, mọi người sẽ bắt đầu điều chỉnh code theo ý thích. Trong mục EDIT Here, chúng ta điều chỉnh nội dung xuất hiện trong trái tim. Trong dòng STARDUST1, bạn có thể thay đổi năm khi cần.

Trong mục STARDUST2, mọi người hãy điền tên của mình cùng với nửa kia. Ở dòng STARDUST3, mọi người có thể tự do điều chỉnh Love You thành bất cứ ký tự nào mình thích.

Ở phần img, chúng ta sẽ điền vào tên và định dạng của hình ảnh bạn muốn chèn vào giữa như hình dưới là được.

Điều chỉnh nội dung theo ý muốn

Bước 6: Sau cùng, các bạn nhấn vào File > Lựa chọn nút Save để lưu lại thành phẩm là hoàn thành.

Lưu lại code

Tiếp đến, bạn có thể mở lên file HTML như bình thường để có thể xem được thành quả của mình nhé.

Thành quả nhận được

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

Nếu bạn muốn làm code trái tim đập có hiển thị chữ thì dùng đoạn mã dưới. Người dùng hoàn toàn có thể điều chỉnh nội dung theo ý muốn.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<TITLE> Heart </TITLE>

<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>

* 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

* 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

3. Code mẫu trái tim cơ bản

Đây chính là những dòng code trước tiên nổi rần rần trên cộng đồng mạng khi phim đã ra mắt tập đầu tiên. Cụ thể, hình trái tim được thiết lập bởi code HTML, vẫn có hiệu ứng động nhưng lại không thể đập được.

Soure code: Internet

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

Nói chung, đây là một mẫu code trái tim giống với loại cơ bản về hình dạng và kết quả. Tuy nhiên, sự khác biệt đó chính là mọi người có thể chèn chữ hoặc chỉnh sửa chữ ở trong theo ý muốn.

Source code: TikTok @_hann_kyy

5. Tải code trái tim đập của Thủ Khoa Lý không tên

Nếu như các bạn chỉ cần code trái tim cơ bản mà không phải là code có tên và chữ bên trong thì hãy sử dụng đoạn code ở bên dưới đây.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

html, body {

height: 100%;

padding: 0;

margin: 0;

background: #000;

}

canvas {

position: absolute;

width: 100%;

height: 100%;

}

</style>

</HEAD>

<BODY>

* 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

* 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

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

Nếu bạn thích sự sáng tạo và hấp dẫn hơn nữa thì mẫu code trái tim này là dành cho bạn. Nó sẽ có thêm các tia sáng xung quanh chủ thể nên trông cực kỳ đẹp mắt.

<!DOCTYPE html>

<head>

<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>

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>

7. Code trái tim đập màu đỏ

Đây cũng là một code trái tim xịn sò mà mọi người có thể sử dụng và gửi tặng cho đối phương của mình. Trái tim mà bạn dùng với đoạn mã code này sở hữu màu đỏ. Chưa hết, xung quanh nó còn lan tỏa ra nhiều trái tim nhỏ cực kỳ xinh và dễ thương.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<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>

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

};

* 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

8. Code trái tim đỏ đập liên tục

Mẫu code trái tim này rất được yêu thích và có ấn tượng do nó được đan xen hiệu ứng cùng với màu sắc bao quanh đỉnh cao. Thành quả mà bạn nhận được khi áp dụng đoạn code này chính là hình trái tim màu đỏ liên tục đập với hiệu ứng tuôn trào ra trông như núi lửa.

Source code: TikTok Xuân Lê

9. Code trái tim huyền bí

Đây chính là một mẫu code trái tim được những lập trình viên tại Việt Nam phát triển. Về cơ bản, nó trông không giống với phiên bản gốc ban đầu. Tuy nhiên, độ lan tỏa và lôi cuốn của nó với giới trẻ là hoàn toàn có nhờ hiệu ứng in-out lạ mắt kèm theo màu sắc đỉnh của chóp

Source code: TikTok Xuân Lê

10. Code trái tim lấp lánh gần giống bản gốc

Đây được xem là một kết quả code trái tim giống trong bản trên phim tới 99%. Tuy nhiên, phần nhịp đập của nó có phần hơi bị ngắt quảng đôi chút.

Source code: TikTok Chang Còi

11. Code trái tim thật có nhịp đập

Đây là một đoạn code trái tim có phần khác bọt nhất so với dàn mã mình mà hướng dẫn ở trên. Khi chạy xong code thì thành quả mà mọi người nhận được chính là một trái tim như tim người thật và có thể đập được. Dù có trông hơi đáng sợ nhưng mà nó cực kỳ chân thật đúng không nào?

Source code: TikTok Trần Quang

12. Một số thông tin cần biết về code trái tim của Thủ Khoa Lý

Cùng tìm hiểu ngay phía dưới đây để xem đâu là những điều mà mọi người thắc mắc về code trái tim Thủ Khoa Lý siêu dễ thương ngay dưới đây.

Tại sao gọi là code trái tim của Thủ Khoa Lý?

Code trái tim Thủ Khoa Lý xuất phát từ bộ phim “Thắp sáng anh, sưởi ấm em” của Trung Quốc và đang được giới trẻ ưa thích. Trong tập 5 của phim, nhân vật Thủ Khoa Lý (Lý Tuân) do Trần Phi Vũ diễn đã dùng code để vẽ ra một trái tim màu hồng đầy ngọt ngào để gửi tới crush của mình là Chu Vận (Trương Tịnh Nghi).Sau đó không lâu, giới trẻ của Trung Hoa đã bắt ngay khoảnh khắc này để đu trend. Kể từ đó, mạng xã hội liên tục được phủ dày đặc bởi các đoạn code trái tim như bản gốc hoặc có biến tấu đôi chút. Chính vì thế, trào lưu này cũng đã nhanh chóng được giới trẻ Việt Nam hưởng ứng rất nhiều trên cả Facebook và TikTok. Bên cạnh phiên bản gốc, cũng có một vài bản được nhiều bạn trẻ yêu thích như: code trái tim có kèm chữ, code hình trái tim đỏ,…

Code trái tim của Thủ Khoa Lý là code gì?

de trái tim Thủ Khoa Lý là code trái tim C++. Đây là một thủ thuật khá phức tạp nên chỉ những cao thủ về lập trình như anh ta mới thực hiện được.

Tại sao không sử dụng được code trái tim?

Điều này có thể là do code bạn nhập bị sai. Mọi người nên copy chuẩn xác những đoạn mã code bên trên mà mình chia sẻ và dán là tốt nhất nhé.

13. Tạm kết

Hy vọng bài viết 10+ cách làm code trái tim của Thủ Khoa Lý cực kỳ đơn giản ở trên cũng giúp bạn biết được về cách tỏ tính siêu hay này với crush. Chúc cho mọi người đều thực hiện thành công cả nhé.

Đừng quên liên tục theo dõi trang vietabinhdinh.edu.vn của hệ thống cửa hàng Trung Tâm Đào Tạo Việt Á để cập nhật tất tần tật mọi thứ về công nghệ mới nhất hiện nay nhé. Xin cám ơn toàn thể các bạn đọc vì đã bớt chút thời gian đọc qua bài viết này của mình. Và quan trọng là hãy nhớ “MUA ĐIỆN THOẠI ĐẾN DI ĐỘNG VIỆT” để được hưởng nhiều ưu đãi nhé.

Trung Tâm Đào Tạo Việt Á

Bạn thấy bài viết Hướng dẫn 10+ cách làm code trái tim như của thủ khoa Lý cực dễ có đáp ướng đươc vấn đề bạn tìm hiểu không?, nếu không hãy comment góp ý thêm về Hướng dẫn 10+ cách làm code trái tim như của thủ khoa Lý cực dễ bên dưới để vietabinhdinh.edu.vn có thể thay đổi & cải thiện nội dung tốt hơn cho các bạn nhé! Cám ơn bạn đã ghé thăm Website: vietabinhdinh.edu.vn

Nhớ để nguồn bài viết này: Hướng dẫn 10+ cách làm code trái tim như của thủ khoa Lý cực dễ của website vietabinhdinh.edu.vn

Chuyên mục: Kiến thức chung