Mới trên đây, những đoạn code trái ngược 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 đem xuất xứ kể từ phim Thắp sáng sủa Anh, sưởi rét Em. Sau Lúc phim tung ra, thật nhiều những dân cư mạng nhưng mà không chỉ có đem dân IT quan hoài và ham muốn tuân theo đoạn code này. Cùng coi ngay lập tức 10+ thủ tục siêu dễ dàng ngay lập tức sau đây.
Bạn đang xem: file code trái tim
1. Cách thực hiện Code trái ngược tim đập chèn hình ảnh
Bên cạnh code hình trái ngược tim thường thì hoặc đạt thêm chữ bên phía trong, quý khách hoàn toàn có thể sử dụng code trái ngược tim đem 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 cơ 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 trên đây đó là từng bước triển khai cụ thể nhất cho chính 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 tải về folder của code trái ngược tim đập đem 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 cơ.
- Tải tệp tin về TẠI ĐÂY
Bước 2: Kế tiếp, quý khách 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 đem chứa chấp code trái ngược tim nhằm chèn hình họa vô trái ngược tim. Lúc 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ác bạn hãy sao chép tên của hình hình họa rồi coi format 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 nên vô tệp tin index.html > Chọn vô Notepad nhằm ngỏ tệp tin hoặc dùng dụng cụ gọi tệp tin HTML nhưng mà chúng ta đang được mua sắm sẵn bên trên PC (nếu có).
Bước 5: Tiếp theo dõi, quý khách tiếp tục chính thức kiểm soát và điều chỉnh code theo ý muốn. 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 ngược tim. Trong loại STARDUST1, bạn cũng có thể thay cho thay đổi năm Lúc cần thiết.
Trong mục STARDUST2, quý khách hãy điền thương hiệu của tôi cùng theo với nửa cơ. Tại loại STARDUST3, quý khách 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à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à format của hình hình họa mình thích 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 ghi lại trở nên phẩm là hoàn thiện.
Tiếp cho tới, bạn cũng có thể ngỏ 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 ngược của tôi nhé.
2. Cách thực hiện code trái ngược tim đập chèn chữ của Thủ Khoa Lý
Nếu mình thích thực hiện code trái ngược tim đập đem 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 dõi ý ham muốn.
- Điều chỉnh code hình trái ngược tim đập đem 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, 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 khuôn mẫu trái ngược 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 cư dân mạng Lúc phim đang được tung ra tập dượt thứ nhất. Cụ thể, hình trái ngược tim được thiết lập bởi vì 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 ngược tim đập của Thủ Khoa Lý đem tên
Nói công cộng, đó là một khuôn mẫu code trái ngược tim như là 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ạ cơ đó là quý khách hoàn toàn có thể chèn chữ hoặc sửa đổi chữ ở vô theo dõi ý ham muốn.
Source code: TikTok @_hann_kyy
5. Tải code trái ngược tim đập của Thủ Khoa Lý ko tên
Nếu như chúng ta chỉ việc code trái ngược tim cơ phiên bản 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 ngược 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, 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: anna gấu live
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 ngược tim đập tia sáng sủa nghệ thuật
Nếu chúng ta mến sự phát minh và thú vị hơn thế thì khuôn mẫu code trái ngược tim này là dành riêng cho chính mình. Nó sẽ có được thêm thắt những tia sáng sủa xung xung quanh công ty nên nhìn khôn cùng thích mắt.
- Điều chỉnh code hình trái ngược 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 ngược tim đập color đỏ
Đây cũng là một trong những code trái ngược tim xịn sò nhưng mà quý khách hoàn toàn có thể dùng và thân tặng mang lại đối phương của tôi. Trái tim nhưng mà chúng ta 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 rộng phủ rời khỏi nhiều trái ngược tim nhỏ khôn cùng xinh và dễ thương.
- Điều chỉnh mã code hình trái ngược 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, 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 ngược tim đỏ ửng đập liên tục
Mẫu code trái ngược tim này vô cùng được yêu thương mến và đem 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 ngược nhưng mà chúng ta có được Lúc vận dụng đoạn code này đó là hình trái ngược 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 ngược tim huyền bí
Đây đó là một khuôn mẫu code trái ngược tim được những lập trình sẵn viên bên trên nước ta cách tâ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 lúc đầu. Tuy nhiên, phỏng rộng phủ và lôi kéo của chính nó với người trẻ tuổi là trọn vẹn đem nhờ cảm giác in-out kì lạ tất nhiên sắc tố đỉnh của chóp
Source code: TikTok Xuân Lê
10. Code trái ngược tim lung linh tương tự phiên bản gốc
Đây sẽ là một thành phẩm code trái ngược tim như là 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ó đem phần tương đối bị ngắt quảng đôi khi.
Source code: TikTok Chang Còi
11. Code trái ngược tim thiệt đem nhịp đập
Đây là một trong những đoạn code trái ngược tim đem 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 đoạn code thì trở nên trái ngược nhưng mà quý khách có được đó là một trái ngược tim như tim người thiệt và hoàn toàn có thể đập được. Dù đem nhìn tương đối khiếp sợ tuy nhiên nhưng mà nó khôn cùng chân thực đúng không ạ nào?
Source code: TikTok Trần Quang
12. Một số vấn đề cần phải biết về code trái ngược tim của Thủ Khoa Lý
Cùng mò mẫm hiểu ngay lập tức phía sau đây nhằm coi đâu là những điều nhưng mà quý khách vướng mắc về code trái ngược tim Thủ Khoa Lý siêu dễ thương ngay lập tức sau đây.
Tại sao gọi là code trái ngược tim của Thủ Khoa Lý?
Code trái ngược tim Thủ Khoa Lý bắt 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 mến. Trong tập dượt 5 của phim, hero Thủ Khoa Lý (Lý Tuân) tự Trần Phi Vũ thao diễn đang được sử dụng code nhằm vẽ rời khỏi một trái ngược tim color hồng lênh láng và ngọt ngào nhằm gửi cho tới crush của tôi là Chu Vận (Trương Tịnh Nghi).
Sau cơ ko lâu, người trẻ tuổi của Trung Hoa đang được bắt ngay lập tức khoảnh xung khắc này nhằm đu trend. Kể kể từ cơ, social liên tiếp được phủ dày quánh bởi vì những đoạn code trái ngược tim như phiên bản gốc hoặc đem đổ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 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 chúng ta trẻ con yêu thương mến như: code trái ngược tim đem kèm cặp chữ, code hình trái ngược tim đỏ ửng,…
Code trái ngược tim của Thủ Khoa Lý là code gì?
de trái ngược tim Thủ Khoa Lý là code trái ngược tim C++. Đây là một trong những thủ pháp khá phức tạp nên chỉ có thể những cao thủ về lập trình sẵn như anh tớ mới nhất triển khai được.
Tại sao ko dùng được code trái ngược tim?
Điều này hoàn toàn có thể là vì code chúng ta 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+ thủ tục code trái ngược tim của Thủ Khoa Lý khôn cùng giản dị phía trên cũng khiến cho 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 lại quý khách đều triển khai thành công xuất sắc cả nhé.
Đừng quên liên tiếp theo dõi 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 gọi vì thế đang được bớt chút thời hạn gọi qua loa nội dung bài viết này của tôi.
Di Động Việt là một trong những đơn vị chức năng sale có trách nhiệm vô nghành nghề dịch vụ Smartphone và luôn luôn đặt điều tận tâm vô việc “CHUYỂN GIAO GIÁ TRỊ VƯỢT TRỘI” mang lại quý khách hàng bởi vì những thành phầm và cty 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 hướng về nhằm mục tiêu mang lại mang lại quý khách hàng hưởng thụ sắm sửa tuyệt hảo hơn hết chính xác chủ yếu thống.
Di Động Việt
Xem thêm: những câu thơ hay
Bình luận