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.
Bạn đang xem: 3 cách tạo code trái tim đơn giản tặng một nửa yêu thương
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.
<!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
Nguồn: https://tuyengiaothudo.vn
Danh mục: Thủ thuật
