Mới phía trên, những đoạn code trái khoáy tim của Thủ Khoa Lý vô cùng dễ thương và lại romantic và lênh láng tinh xảo sở hữu xuất xứ kể từ phim Thắp sáng sủa Anh, sưởi lạnh lẽo Em. Sau khi phim tung ra, thật nhiều những người dân mạng tuy nhiên không những sở hữu 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+ thủ tục siêu dễ dàng tức thì sau đây.
Bạn đang xem: mã code hình 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 đạt thêm chữ phía bên trong, người xem hoàn toàn có thể sử dụng code trái khoáy tim sở hữu chèn hình hình họa. Còn gì tuyệt rộng lớn khi chúng ta chèn thêm thắt hình hình họa của tôi và nửa bại với cảm giác đập liên tiếp và phân phát 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 sở hữu chèn hình hình họa về bên trên máy. Sau khi tải về, chúng ta tổ chức giải nén tệp tin bại.
- 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 sở hữu 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 bại, khi 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 bại, 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 con chuột cần vô tệp tin index.html > Chọn vô Notepad nhằm há tệp tin hoặc dùng dụng cụ phát âm tệp tin HTML tuy nhiên các bạn đang được download sẵn bên trên PC (nếu có).
Bước 5: Tiếp theo gót, 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 dòng sản phẩm STARDUST1, chúng ta có thể thay cho thay đổi năm khi 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 bại. Tại dòng sản phẩm 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ở thành bất kể ký tự động nào là 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 thích chèn vô thân ái 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 đánh dấu trở thành phẩm là hoàn thiện.
Tiếp cho tới, chúng ta có thể há lên tệp tin HTML như thông thường nhằm hoàn toàn có thể coi được trở thành 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 thích thực hiện code trái khoáy tim đập sở hữu 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 gót ý ham muốn.
- Điều chỉnh code hình trái khoáy tim đập sở hữu 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 lớn 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 hình mẫu trái khoáy tim cơ bản
Đây đó là những dòng sản phẩm code trước tiên nổi rần rần bên trên cư dân mạng khi phim đang được tung ra luyện thứ nhất. Cụ thể, hình trái khoáy tim được thiết lập vày 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ý sở hữu tên
Nói cộng đồng, đấy là một hình mẫu code trái khoáy tim như thể với loại cơ phiên bản về hình dạng và thành phẩm. Tuy nhiên, sự khác lạ bại đó là người xem hoàn toàn có thể chèn chữ hoặc sửa đổi chữ ở vô theo gót ý 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ơ phiên bản tuy nhiên ko cần là code mang tên và chữ phía bên 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: hình ảnh bầu trời trong xanh đẹp
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 lớn 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 mến sự phát minh và thú vị hơn thế thì hình mẫu code trái khoáy tim này là dành riêng cho mình. Nó sẽ sở hữu được thêm thắt những tia sáng sủa xung xung quanh đơn vị nên nhìn hết sức 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à một trong code trái khoáy tim xịn sò tuy nhiên 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 tuy nhiên 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 rời khỏi nhiều trái khoáy tim nhỏ hết sức xinh và dễ thương.
- Điều chỉnh mã code hình trái 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 lớn 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 mến và sở hữu tuyệt vời tự nó được xen kẹt cảm giác cùng theo với sắc tố xung quanh đỉnh điểm. Thành trái khoáy tuy nhiên các bạn sẽ có được khi 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 rời khỏi 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 hình mẫu code trái khoáy tim được những thiết kế viên bên trên nước ta cải tiến và phát triển. Về cơ phiên bản, nó nhìn rất khác với phiên phiên bản gốc thuở đầu. Tuy nhiên, chừng tỏa khắp và lôi kéo của chính nó với thanh niên là trọn vẹn sở hữu nhờ cảm giác in-out kì quặc 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ự phiên bản gốc
Đây sẽ là một thành phẩm code trái khoáy tim như thể vô phiên bản bên trên phim cho tới 99%. Tuy nhiên, phần nhịp đập của chính nó sở hữu 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 sở hữu nhịp đập
Đây là một trong đoạn code trái khoáy tim sở hữu phần không giống bọt nhất đối với dàn mã bản thân tuy nhiên chỉ dẫn phía trên. Khi chạy hoàn thành code thì trở thành trái khoáy tuy nhiên 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ù sở hữu nhìn tương đối kinh sợ tuy nhiên nhưng mà nó hết sức sống động đúng không ạ 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 thăm dò hiểu tức thì phía sau đây nhằm coi đâu là những điều tuy nhiên người xem vướng mắc về code trái khoáy tim Thủ Khoa Lý siêu dễ thương 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ý xuất phát điểm từ bộ phim truyện “Thắp sáng sủa anh, sưởi lạnh lẽo em” của Trung Quốc và đang rất được thanh niên ưa mến. Trong luyện 5 của phim, anh hùng Thủ Khoa Lý (Lý Tuân) tự Trần Phi Vũ biểu diễn đang được sử dụng code nhằm vẽ rời khỏi một trái khoáy tim color hồng lênh láng 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 bại ko lâu, thanh niên của Trung Hoa đang được bắt tức thì khoảnh tương khắc này nhằm đu trend. Kể kể từ bại, social liên tiếp được phủ dày quánh vày những đoạn code trái khoáy tim như phiên bản gốc hoặc sở hữu đổi khác đôi khi. Chính vì vậy, trào lưu này đã và đang nhanh gọn lẹ được thanh niên nước ta tận hưởng ứng thật nhiều bên trên cả Facebook và TikTok. Cạnh cạnh phiên phiên bản gốc, cũng có thể có một vài ba phiên bản được rất nhiều các bạn trẻ em yêu thương mến như: code trái khoáy tim sở hữu 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à một trong mẹo nhỏ khá phức tạp nên chỉ có thể những cao thủ về thiết kế như anh tớ 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 tuy nhiên bản thân share và dán là cực tốt nhé.
13. Tạm kết
Hy vọng nội dung bài viết 10+ thủ tục code trái khoáy tim của Thủ Khoa Lý hết sức giản dị phía trên cũng giúp đỡ bạn hiểu rằng về phong thái 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 gót dõi trang Dchannel của khối hệ thống siêu thị 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 bấy giờ nhé. Xin cám ơn toàn thể chúng ta phát âm vì thế đang được giảm bớt chút thời hạn phát âm qua loa nội dung bài viết này của tôi.
Di Động Việt là một trong đơn vị chức năng marketing có tính chuyên nghiệp trong nghề điện thoại thông minh và luôn luôn bịa đặt tận tâm vô việc “CHUYỂN GIAO GIÁ TRỊ VƯỢT TRỘI” mang đến quý khách vày những thành phầm và công ty của tôi. Tận tâm, trách móc nhiệm, chủ yếu và khẳng định là những loại tuy nhiên Di Động Việt luôn luôn nhắm đến nhằm mục đích mang về mang đến quý khách hưởng thụ sắm sửa ấn tượng hơn hết đích thị chủ yếu thống.
Di Động Việt
Xem thêm: ảnh trai đẹp k7
Bình luận