5 code trái tim đập của thủ khoa lý có tên, chèn ảnh

5 CODE TRÁI TIM ĐẬP CỦA THỦ KHOA LÝ CÓ TÊN, CHÈN ẢNH 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 A

Trang 1

5 CODE TRÁI TIM ĐẬP CỦA THỦ KHOA LÝ CÓ TÊN, CHÈN ẢNH

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é

Mục lục bài viết

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

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

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

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

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

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

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

Trang 2

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

Trang 3

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

Trang 4

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ó

Trang 5

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

Trang 6

Bước 6:

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

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

Trang 7

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>

Trang 9

#pinkboard:after {

Trang 10

Trang 11

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

g=window.setTimeout(function(){h(d+f)},f);b=d+f;return

g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());

Trang 12

this.x = (typeof x !== 'undefined') ? x : 0;

this.y = (typeof y !== 'undefined') ? y : 0;

if (typeof length == 'unde fined')

return Math.sqrt(this.x * this.x + this.y * this.y); this.normalize();

Trang 13

this.position = new Point();

this.velocity = new Point();

this.acceleration = new Point();

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;

Trang 14

context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);

// create and populate particle pool

particles = new Array(length);

for (var i = 0; i < particles.length; i++)

particles[i] = new Particle();

if (firstFree == particles.length) firstFree = 0;

if (firstActive == firstFree ) firstActive++;

Trang 15

if (firstActive == particles.length) firs tActive = 0;

// remove inactive particles

while (particles[firstActive].age >= duration && firstActive != firstFree) {

Trang 16

// draw active particles

var context = canvas.getContext('2d'),

particles = new ParticlePool(settings.particles.length),

particleRate = settings.particles.length / settings.particles.duration, // particles/sec

Trang 17

// creating the particle image using a dummy canvas

var image = (function() {

var canvas = document.createElement('canvas'),

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;

Trang 18

// create the image

var image = new Image();

var newTime = new Date().getTime() / 1000,

deltaTime = newTime - (time || newTime);

Trang 19

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

Trang 20

<div class="center -text",

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

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

Trang 21

Trang 23

g=window.setTimeout(function(){h(d+f)} ,f);b=d+f;return

Trang 24

Trang 25

return Math.sqrt(this.x * th is.x + this.y * this.y);

Trang 26

Trang 27

this.position.x += this.velocity.x * deltaTime;

this.age += deltaTime;

};

Trang 28

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

Trang 29

var ParticlePool = (function() {

// create and populate particle pool

}

ParticlePool.prototype.add = function(x, y, dx, dy) {

Trang 30

particles[firstFree].initialize(x, y, dx, dy);

// handle circular queue

firstFree++;

if (firstActive == particles.length) firstActive = 0;

Trang 31

// remove inactive particles

while (particles[firstActive].age >= duration && firstActive != firstFree) {

firstActive++;

if (firstActive == particles.length) firstActive = 0;

Trang 32

}

};

ParticlePool.prototype.draw = function(context, image) {

// draw active particles

Trang 33

for (i = 0; i < firstFree; i++)

var context = canvas.getContext('2d'),

particles = new ParticlePool(settings.particles.length),

particleRate = settings.particles.length / settings.particles.duration, // particles/sec

Trang 34

// creating the particle image using a dummy canvas

var image = (function() {

var canvas = document.createElement('canvas'),

Trang 35

context = canvas.getContext('2d');

canvas.width = settings.particles.size;

canvas.height = settings.pa rticles.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();

Trang 36

// create the image

var image = new Image();

Trang 37

var newTime = new Date().getTime() / 1000,

deltaTime = newTime - (time || newTime);

time = newTime;

Trang 38

// 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.rand om());

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

Trang 40

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>

<head>

<title>Document</title>

<style>

canvas {

position: absolute;

Trang 41

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

Trang 42

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 = functi on (pos, sx, sy, dx, dy) {

Trang 43

return [dx + pos[0] * sx, dy + pos[1] * sy];

};

window.addEventListener('resize', function () {

width = canvas.width = koef * innerWidth;

height = canvas.he ight = koef * innerHeight;

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 = funct ion (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;

Trang 44

}

};

var e = [];

for (i = 0; i < heartPointsCount; i++) {

var x = rand() * width;

var y = rand() * height;

Trang 46

}

u.vx += -dx / length * u.speed;

u.vy += -dy / length * u.speed;

Trang 47

};

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

<HTML>

<HEAD>

Trang 48

length: 10000, // maximum amount of particles

Trang 49

nimationFrame=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.ma x(0,16-(d-b));var

g=window.setTimeout(function(){h(d+f)},f);b=d+f;return

if (typeof length == 'undefined')

return Math.sqrt(this.x * this.x + this.y * this.y);

Trang 50

};

Particle.prototype.update = function(deltaTime) { this.position.x += this.velocity.x * deltaTime;

Trang 51

Trang 52

if (firstActive == particles.length) firstActive = 0; };

ParticlePool.prototype.update = function(deltaTime) { var i;

Tiêu đề	5 Code Trái Tim Đập Của Thủ Khoa Lý Có Tên, Chèn Ảnh
Tác giả	Nhóm tác giả
Trường học	Đại Học Giao Thao Dân Lập Thái Nguyên
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Báo cáo
Năm xuất bản	2023
Thành phố	Thái Nguyên

Định dạng
Số trang	59
Dung lượng	724,39 KB