3 cách tạo code trái tim đơn giản tặng một nửa yêu thương

Code trái tim là một trend bắt nguồn từ bộ phim “Thắp sáng anh, sưởi ấm em”. Theo đó, mọi người chỉ cần làm theo đoạn code này để tạo nên tác phẩm trái tim dành tặng nửa yêu thương. Bài viết dưới đây, tuyengiaothudo.vn sẽ tổng hợp những cách viết code tạo hình trái tim cho các bạn tham khảo nhé!

Code trái tim là gì?

Code hình trái tim có nguồn gốc từ bộ phim Trung Quốc mang tên “Thắp sáng anh, sưởi ấm em”. Cụ thể trong tập 5 của bộ phim, một chàng trai thủ khoa Lý (Lý Tuân) đã viết code để tạo ra hình trái tim lãng mạn gửi tới crush. Ngay sau tập phim, giới trẻ đã “đu trend” và nhanh chóng được lan truyền trên nền tảng mạng xã hội Facebook, Tiktok. So với bản gốc, code hình trái tim được biến tấu như code kèm chữ, kèm hình ảnh,… Nhìn chung đây là một thủ thuật khá phức tạp đòi hỏi mọi người cần tập trung khi viết code.

Hướng dẫn những cách viết code trái tim đơn giản

Sau khi trend viết code tạo hình trái tim được lan truyền trên mạng, cách viết code được biến tấu, thay đổi. Sau đây, chúng tôi sẽ hướng dẫn cách viết code tạo hình trái tim đa dạng cho các bạn tham khảo:

Tạo code trái tim chèn chữ

Cách viết code hình trái tim chèn chữ tặng một nửa yêu thương khá đơn giản, mọi người hãy dùng đoạn mã dưới đây. Lưu ý, người dùng hãy copy chính xác đoạn mã này và có thể điều chỉnh nội dung theo ý muốn.

READ Screen Mirroring là gì? Lợi ích và cách để kết nối Screen Mirroring

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

READ Ephoto 360 – Photo Effects: Công cụ biên tập ảnh với nhiều hiệu ứng

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

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebook và zalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Xem thêm: