Mới phía trên, những đoạn code trái khoáy tim của Thủ Khoa Lý vô cùng đáng yêu và lại thắm thiết và lênh láng tinh xảo với xuất xứ kể từ phim Thắp sáng sủa Anh, sưởi rét Em. Sau Lúc phim trình làng, thật nhiều những dân cư mạng nhưng mà không chỉ có với dân IT quan hoài và ham muốn tuân theo đoạn code này. Cùng coi tức thì 10+ cách thức siêu dễ dàng tức thì sau đây.
Bạn đang xem: mã code trái tim
1. Cách thực hiện Code trái khoáy tim đập chèn hình ảnh
Bên cạnh code hình trái khoáy tim thường thì hoặc nhận thêm chữ bên phía trong, người xem hoàn toàn có thể sử dụng code trái khoáy tim với chèn hình hình họa. Còn gì tuyệt rộng lớn khi chúng ta chèn tăng hình hình họa của tôi và nửa ê với cảm giác đập liên tiếp và vạc sáng sủa xung xung quanh. Dưới phía trên đó là từng bước triển khai cụ thể nhất cho mình.
Bước 1: Trước tiên, từng visitor vô đường liên kết ở phía bên dưới nhằm vận chuyển về folder của code trái khoáy tim đập với chèn hình hình họa về bên trên máy. Sau Lúc tải về, chúng ta tổ chức giải nén tệp tin ê.
- Tải tệp tin về TẠI ĐÂY
Bước 2: Kế tiếp, người xem hãy dịch rời tệp tin hình hình họa bản thân cần thiết vô chung với folder với chứa chấp code trái khoáy tim nhằm chèn hình họa vô trái khoáy tim. Lúc ê, Lúc tất cả chúng ta kiểm soát và điều chỉnh code thì chèn hình họa mới nhất thành công xuất sắc.
Bước 3: Sau ê, các bạn hãy sao chép tên của hình hình họa rồi coi định hình của chính nó là gì nhằm hoàn toàn có thể chèn vô code.
Bước 4: Click loài chuột nên vô tệp tin index.html > Chọn vô Notepad nhằm banh tệp tin hoặc dùng dụng cụ hiểu tệp tin HTML nhưng mà các bạn tiếp tục sở hữu sẵn bên trên PC (nếu có).
Bước 5: Tiếp theo đuổi, người xem tiếp tục chính thức kiểm soát và điều chỉnh code theo nhu cầu. Trong mục EDIT Here, tất cả chúng ta kiểm soát và điều chỉnh nội dung xuất hiện nay vô trái khoáy tim. Trong loại STARDUST1, chúng ta cũng có thể thay cho thay đổi năm Lúc cần thiết.
Trong mục STARDUST2, người xem hãy điền thương hiệu của tôi cùng theo với nửa ê. Tại loại STARDUST3, người xem hoàn toàn có thể tự tại kiểm soát và điều chỉnh Love You trở nên bất kể ký tự động này mình yêu thích.
Ở phần img, tất cả chúng ta tiếp tục điền vô thương hiệu và định hình của hình hình họa mình muốn chèn vô thân thiện như hình bên dưới là được.
Bước 6: Sau nằm trong, chúng ta nhấn vô File > Lựa lựa chọn nút Save nhằm khắc ghi trở nên phẩm là hoàn thiện.
Tiếp cho tới, chúng ta cũng có thể banh lên tệp tin HTML như thông thường nhằm hoàn toàn có thể coi được trở nên trái khoáy của tôi nhé.
2. Cách thực hiện code trái khoáy tim đập chèn chữ của Thủ Khoa Lý
Nếu mình muốn thực hiện code trái khoáy tim đập với hiển thị chữ thì sử dụng đoạn mã bên dưới. Người sử dụng trọn vẹn hoàn toàn có thể kiểm soát và điều chỉnh nội dung theo đuổi ý ham muốn.
- Điều chỉnh code hình trái khoáy tim đập với chèn chữ online
<!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 toàn thân {
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.nó = (typeof nó !== ‘undefined’) ? nó : 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.nó * this.y);
this.normalize();
this.x *= length;
this.nó *= length;
return this;
};
Point.prototype.normalize = function() {
var length = this.length();
this.x /= length;
this.nó /= 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, nó, dx, dy) {
this.position.x = x;
this.position.nó = y;
this.velocity.x = dx;
this.velocity.nó = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.nó = dy * settings.particles.effect;
this.age = 0;
};
Particle.prototype.update = function(deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.nó += this.velocity.nó * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.nó += this.acceleration.nó * 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.nó – 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, nó, dx, dy) {
particles[firstFree].initialize(x, nó, 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) – trăng tròn * 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 vĩ đại create the path
function to(t) {
var point = pointOnHeart(t);
point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
point.nó = settings.particles.size / 2 – point.nó * 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 = ‘#FF5CA4’;
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’));
</script>
<div class=”center-text”,
style=”background-color:rgb(0, 0, 0);
width: 100%;
color: rgb(225, 12, 168);
height:100%;
font-size: 31px;
font-style: italic;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
text-align: center;”>Anh Yêu Em</div>
</BODY>
</HTML>
3. Code kiểu mẫu trái khoáy tim cơ bản
Đây đó là những loại code trước tiên nổi rần rần bên trên dân mạng Lúc phim tiếp tục trình làng tập luyện thứ nhất. Cụ thể, hình trái khoáy tim được thiết lập bởi code HTML, vẫn đang còn cảm giác động tuy nhiên lại ko thể đập được.
Soure code: Internet
4. Tải code trái khoáy tim đập của Thủ Khoa Lý với tên
Nói công cộng, đó là một kiểu mẫu code trái khoáy tim như thể với loại cơ bạn dạng về hình dạng và thành phẩm. Tuy nhiên, sự khác lạ ê đó là người xem hoàn toàn có thể chèn chữ hoặc sửa đổi chữ ở vô theo đuổi ý ham muốn.
Source code: TikTok @_hann_kyy
5. Tải code trái khoáy tim đập của Thủ Khoa Lý ko tên
Nếu như chúng ta chỉ việc code trái khoáy tim cơ bạn dạng nhưng mà ko nên là code mang tên và chữ bên phía trong thì nên dùng đoạn code ở sau đây.
- Điều chỉnh code hình trái khoáy tim đập ko tên
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
<style>
html, body toàn thân {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>
<BODY>
<canvas id=”pinkboard”></canvas>
<script>
/*
* 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<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.nó = (typeof nó !== ‘undefined’) ? nó : 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.nó * this.y);
this.normalize();
this.x *= length;
this.nó *= length;
return this;
};
Point.prototype.normalize = function() {
var length = this.length();
this.x /= length;
this.nó /= 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, nó, dx, dy) {
this.position.x = x;
this.position.nó = y;
this.velocity.x = dx;
this.velocity.nó = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.nó = dy * settings.particles.effect;
this.age = 0;
};
Particle.prototype.update = function(deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.nó += this.velocity.nó * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.nó += this.acceleration.nó * 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.nó – 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, nó, dx, dy) {
particles[firstFree].initialize(x, nó, 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) {
Xem thêm: chiến thân ở rể
return new Point(
160 * Math.pow(Math.sin(t), 3),
130 * Math.cos(t) – 50 * Math.cos(2 * t) – trăng tròn * 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 vĩ đại create the path
function to(t) {
var point = pointOnHeart(t);
point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
point.nó = settings.particles.size / 2 – point.nó * 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’));
</script>
</BODY>
</HTML>
6. Code trái khoáy tim đập tia sáng sủa nghệ thuật
Nếu các bạn quí sự tạo nên và thú vị hơn thế thì kiểu mẫu code trái khoáy tim này là dành riêng cho mình. Nó sẽ sở hữu tăng những tia sáng sủa xung xung quanh công ty nên nhìn vô cùng thích mắt.
- Điều chỉnh code hình trái khoáy tim đập tia sáng
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<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>
<canvas id=”heart”></canvas>
<script>
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 ? trăng tròn : 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 nó = 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: nó };
}
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].nó – 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].nó += 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.nó -= config.traceK * (N.nó – 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 khoáy tim đập color đỏ
Đây cũng là 1 trong code trái khoáy tim xịn sò nhưng mà người xem hoàn toàn có thể dùng và tặng miễn phí mang đến đối phương của tôi. Trái tim nhưng mà các bạn sử dụng với đoạn mã code này chiếm hữu red color. Chưa không còn, xung xung quanh nó còn tỏa khắp đi ra nhiều trái khoáy tim nhỏ vô cùng xinh và xinh đẹp.
- Điều chỉnh mã code hình trái khoáy tim color đỏ
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> MINH IT </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
<link rel=”stylesheet” href=”style.css”>
<style>
html, body toàn thân {
height: 100%;
padding: 0;
margin: 0;
background: rgba(0, 0, 0, 0.851);
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>
<BODY>
<div class=”box”>
<canvas id=”pinkboard”></canvas>
</div>
<script>
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
},
};
/*
*/
(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.nó = (typeof nó !== ‘undefined’) ? nó : 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.nó * this.y);
this.normalize();
this.x *= length;
this.nó *= length;
return this;
};
Point.prototype.normalize = function() {
var length = this.length();
this.x /= length;
this.nó /= 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, nó, dx, dy) {
this.position.x = x;
this.position.nó = y;
this.velocity.x = dx;
this.velocity.nó = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.nó = dy * settings.particles.effect;
this.age = 0;
};
Particle.prototype.update = function(deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.nó += this.velocity.nó * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.nó += this.acceleration.nó * 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.nó – 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, nó, dx, dy) {
particles[firstFree].initialize(x, nó, 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) – trăng tròn * 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 vĩ đại create the path
function to(t) {
var point = pointOnHeart(t);
point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
point.nó = settings.particles.size / 2 – point.nó * 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 = ‘#f50b02’;
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’));
</script>
</BODY>
</HTML>
8. Code trái khoáy tim đỏ tía đập liên tục
Mẫu code trái khoáy tim này vô cùng được yêu thương quí và với tuyệt vời bởi nó được xen kẽ cảm giác cùng theo với sắc tố xung quanh đỉnh điểm. Thành trái khoáy nhưng mà các bạn sẽ có được Lúc vận dụng đoạn code này đó là hình trái khoáy tim red color liên tiếp đập với cảm giác tuôn trào đi ra nhìn như núi lửa.
Source code: TikTok Xuân Lê
9. Code trái khoáy tim huyền bí
Đây đó là một kiểu mẫu code trái khoáy tim được những lập trình sẵn viên bên trên nước ta cải tiến và phát triển. Về cơ bạn dạng, nó nhìn rất khác với phiên bạn dạng gốc lúc đầu. Tuy nhiên, phỏng tỏa khắp và quyến rũ của chính nó với người trẻ tuổi là trọn vẹn với nhờ cảm giác in-out kì khôi tất nhiên sắc tố đỉnh của chóp
Source code: TikTok Xuân Lê
10. Code trái khoáy tim lung linh tương tự bạn dạng gốc
Đây sẽ là một thành phẩm code trái khoáy tim như thể vô bạn dạng bên trên phim cho tới 99%. Tuy nhiên, phần nhịp đập của chính nó với phần tương đối bị ngắt quảng đôi khi.
Source code: TikTok Chang Còi
11. Code trái khoáy tim thiệt với nhịp đập
Đây là 1 trong đoạn code trái khoáy tim với phần không giống bọt nhất đối với dàn mã bản thân nhưng mà chỉ dẫn phía trên. Khi chạy hoàn thành code thì trở nên trái khoáy nhưng mà người xem sẽ có được đó là một trái khoáy tim như tim người thiệt và hoàn toàn có thể đập được. Dù với nhìn tương đối kinh sợ tuy nhiên nhưng mà nó vô cùng sống động đúng không nhỉ nào?
Source code: TikTok Trần Quang
12. Một số vấn đề nên biết về code trái khoáy tim của Thủ Khoa Lý
Cùng mò mẫm hiểu tức thì phía sau đây nhằm coi đâu là những điều nhưng mà người xem vướng mắc về code trái khoáy tim Thủ Khoa Lý siêu xinh đẹp tức thì sau đây.
Tại sao gọi là code trái khoáy tim của Thủ Khoa Lý?
Code trái khoáy tim Thủ Khoa Lý khởi nguồn từ bộ phim truyền hình “Thắp sáng sủa anh, sưởi rét em” của Trung Quốc và đang rất được người trẻ tuổi ưa quí. Trong tập luyện 5 của phim, anh hùng Thủ Khoa Lý (Lý Tuân) bởi Trần Phi Vũ biểu diễn tiếp tục sử dụng code nhằm vẽ đi ra một trái khoáy tim color hồng lênh láng ngọt ngào và lắng đọng nhằm gửi cho tới crush của tôi là Chu Vận (Trương Tịnh Nghi).
Sau ê ko lâu, người trẻ tuổi của Trung Hoa tiếp tục bắt tức thì khoảnh tự khắc này nhằm đu trend. Kể kể từ ê, social liên tiếp được phủ dày quánh bởi những đoạn code trái khoáy tim như bạn dạng gốc hoặc với đổi khác đôi khi. Chính vì vậy, trào lưu này đã và đang nhanh gọn được người trẻ tuổi nước ta tận hưởng ứng thật nhiều bên trên cả Facebook và TikTok. Mé cạnh phiên bạn dạng gốc, cũng có thể có một vài ba bạn dạng được không ít các bạn trẻ con yêu thương quí như: code trái khoáy tim với kèm cặp chữ, code hình trái khoáy tim đỏ tía,…
Code trái khoáy tim của Thủ Khoa Lý là code gì?
de trái khoáy tim Thủ Khoa Lý là code trái khoáy tim C++. Đây là 1 trong mẹo nhỏ khá phức tạp nên có thể những cao thủ về lập trình sẵn như anh tao mới nhất triển khai được.
Tại sao ko dùng được code trái khoáy tim?
Điều này hoàn toàn có thể là vì code các bạn nhập bị sai. Mọi người nên copy chuẩn chỉnh xác những đoạn mã code bên trên nhưng mà bản thân share và dán là rất tốt nhé.
13. Tạm kết
Hy vọng nội dung bài viết 10+ cách thức code trái khoáy tim của Thủ Khoa Lý vô cùng giản dị và đơn giản phía trên cũng khiến cho bạn hiểu rằng về kiểu cách tỏ tính siêu hoặc này với crush. Chúc mang đến người xem đều triển khai thành công xuất sắc cả nhé.
Đừng quên liên tiếp theo đuổi dõi trang Dchannel của khối hệ thống cửa hàng Di Động Việt nhằm update vớ tần tật tất cả về technology tiên tiến nhất lúc này nhé. Xin cám ơn toàn thể chúng ta hiểu vì như thế tiếp tục hạn chế chút thời hạn hiểu qua loa nội dung bài viết này của tôi.
Di Động Việt là 1 trong đơn vị chức năng sale có trách nhiệm vô nghành nghề dịch vụ điện thoại cảm ứng thông minh và luôn luôn bịa tận tâm vô việc “CHUYỂN GIAO GIÁ TRỊ VƯỢT TRỘI” mang đến quý khách bởi những thành phầm và công ty của tôi. Tận tâm, trách cứ nhiệm, chủ yếu và khẳng định là những loại nhưng mà Di Động Việt luôn luôn nhắm tới nhằm mục đích mang tới mang đến quý khách thưởng thức sắm sửa ấn tượng hơn hết chính xác chủ yếu thống.
Di Động Việt
Xem thêm: phenol phản ứng được với dung dịch nào sau đây
Bình luận