[Have you found someone who will hold hands for a lifetime? ] Chinese Valentine's Day Special
Contents of this article:
2. I use AI to generate pictures to tell my own story
3. Valentine’s Day Valentine’s Day confession love animation webpage special effects
4. Other Valentine's Day web page effects
1. The words written in front
Today is Chinese Valentine's Day, so I rushed to make this small Chinese Valentine's Day album for everyone.
Fate has always been unpredictable, there are too many temptations in the world of mortals; there are too many trivialities in the long years. Some people have waited for a lifetime, resisting all kinds of temptations, the discrimination of the world, and the pressure of life, but they can't resist the arrangement of fate, and they can't wait until they decide in their hearts (thinking that they are destined) The one who appeared in front of me.
Regarding love, there are many classic lines in film and television dramas, for example: Do you still remember the classic lines of "A Chinese Journey to the West"?
1. Whether it is a fairy or a monster, only me and the person I love can pull out the sword. Even if he is a monster, I will follow him for the rest of my life. If I can't be with the person I like, I won't be happy even if I am the Jade Emperor.
2. The person I like is a hero of the world. One day he will drive the colorful clouds to marry me
3. Just cheat, just like a moth, knowing that it will get hurt, it will still jump on the fire, moths are so stupid
4. If one day I can't help but ask you, you must lie to me, no matter how unwilling you are, don't tell me that you never liked me
5. My ideal person is a world-class hero. One day he will step on colorful clouds to marry me. I guessed the beginning, but I can't guess the ending...
6. When one day you find that you like someone you hate, this relationship is the worst.
7. Once there was a sincere love in front of me. I didn't cherish it. I regretted it when I lost it. The most painful thing in the world is this.
8. If God can give me another chance, I will say three words to that girl: I love you. If I have to add a time limit to this love, I hope it will be 10,000 years.
Everyone's personality and hobbies are different. Some people will live forever at a glance, and it doesn't matter if others come and go.
We think that the vigorous love is often defeated by reality. Few people really choose and insist on the unique and indispensable love. In most cases, many people choose to be with someone after weighing various pros and cons. .
Now that we have met and chose to be together, we should be ready to accept everything about each other, and we should not blame each other for perfection, but give each other more tolerance and appreciation, and support each other . It is good to have the real years.
If two people are together, it is inevitable to face some problems and conflicts. If you only know how to pick on each other, but don’t know how to support and appreciate each other, you will look down on each other every day. I'm not smart, and I blame you for being inferior to others, so what's the point of living together? Then this relationship will sooner or later be on the verge of separation. Don't be too harsh on the people around you. There are tens of thousands of people in the world, and they can meet each other in the sea of people. Getting to know each other is a fate cultivated in the previous life. We didn't owe each other in the previous life, and we didn't meet each other in this life. When we met, please tolerate each other's imperfections. Two people come together because of fate, and two people go on together because of tolerance. In such a big world, life is not easy. We often feel lonely and helpless. We hope to have someone to accompany us. We hope that there will be more understanding in life, not more depression and restraint. Companionship is the longest confession of love . For this reason, we must learn to cherish every moment we spend with people around us.
As the saying goes, no gold is pure, and no one is perfect.
"More and more people are leaving, and those who stay are becoming more and more important." Everyone is just a passerby who accompanies each other on a journey. You can't guess when, he will get out of the car and walk away. You also have no way of knowing that you will arrive at the station and leave at a certain moment. This is a kind of helplessness in life, but also a kind of gratitude. Everyone is making choices, which is understandable, but if you don’t give up on yourself because of changes, and try to live every day, fate will arrange everything that is better and more suitable for you to wait for you. I found out that there is a saying: Thank your ex for not marrying or for not marrying, those are the real experiences of those who came here.
If you are lucky enough to meet your fate, please cherish it, it may be something that others have never had after waiting for a lifetime. I (the older sister at the grandma level is sober in adversity) is a silent and firm existence, not your world, but your shoulder. May all lovers in the world get married eventually!
Sharing some of my favorite lyrics:
1. The innocence and tenderness unique to women should be reserved for the one who truly loves you. No matter how hard or difficult the future is, he will accompany you to complete it.
2. Accompany you to live out the answers to the impressions along the way, accompany you to turn loneliness into bravery, and I did not leave after losing again and again.
Companionship is the longest confession of love. Accompany you to embrace the sourness of missing into warmth, and accompany you to write out the plot of the hesitation. No matter how long the future is, there are still expectations. I will accompany you until the end of this story.
3、
Because I love your love, because I dream of your dreams, I am sad about your sadness and happy about your happiness.
Because of passing your way, because I have suffered through your suffering, so I am happy with your happiness and chase your pursuit.
Because I dare not listen to the oath, because I dare not believe the promise, so I rest assured of your silence to convince the fate of tomorrow.
There is no wind and rain to hide from, no ups and downs to go, so hold your hand with peace of mind, and don't think about whether you should look back.
Maybe holding hands, the past life may not be easy to walk, maybe with a companion, this life will be busier.
So holding hands, we will walk together in the next life, so there is no time to turn back when we have a companion.
Sober in adversity
2023.8.22
2. I use AI to generate pictures to tell my own story
1. Since I was a child, I believed that someone I was destined for would come to me and spend the rest of my life hand in hand with me, never leaving.
So I have been quietly and obediently waiting in the big city for someone whom I don't know to appear.
2. Unfortunately, I waited until I turned white, but the destined person never appeared in front of my eyes.
Unfortunately, I don't have any memory of him.
It's a pity that I didn't get to share my favorite songs with him and show him the pictures I drew.
It's a pity that if he missed the appointment due to an accident, I couldn't go to see him where he was, bring him the meals and snacks I made, and bring him the flowers I planted. . .
3. If he chooses someone else because I am not good enough,
I am very fortunate that the person I have been waiting for is a very good person.
I am very fortunate that he will be accompanied by women who are as good as him, and he will not be alone.
I'm thankful that he doesn't have to passively go through this inescapable predicament with me.
I'm so thankful that the person I've been waiting for will have a better life than me!
3. Valentine’s Day Valentine’s Day confession love animation webpage special effects
3.1. Features
The whole screen of hearts flutters with the mouse, and when the mouse moves to the name part, a specified sentence can be displayed.
How to use, explanation of frequently asked questions-----"Click here: Instructions for copying webpage special effect code
After you download the complete code, just change the name and send it to your favorite people, I wish you a happy Qixi Festival!
The network code used in the js part, the author information is kept in the code.
3.2, code decomposition
css code:
<style>
body {
background: #f2f2f2;
color: #333;
font-family: Arial, sans-serif;
background: url("flower2.jpg") no-repeat center;
background-size: 100%;
}
#container {
width: 700px;
max-width: 700px;
margin: 0 auto;
text-align: center;
padding: 30px;
background:#f26ab4;
-webkit-animation: bg-spin 3s linear infinite;
animation: bg-spin 3s linear infinite;
border-style: double;
border-radius: 20px;
padding: 25px 25px;
opacity: 1;
--border-size: 9px;
--border-angle: 0turn;
background-image: conic-gradient(from var(--border-angle), #e7f0fd, #e7f0fd 50%, #e7f0fd), conic-gradient(from var(--border-angle), transparent 30%, #08f, #f02e1c);
background-size: calc(99% - (var(--border-size) * 2)) calc(99% - (var(--border-size) * 2)), cover;
background-position: center center;
background-repeat: no-repeat;
}
@-webkit-keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
@keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
h1 {
font-size: 48px;
//margin-bottom: 30px;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0 20px;
}
nav ul li a {
color: #333;
text-decoration: none;
font-size: 20px;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #f26ab4;
font-weight: bold;
cursor: pointer;
}
h1 {
font-size: 1.6rem;
}
h2 {
padding: 0.8rem 0 0 0;
}
p {
padding: 0.8rem 0;
font-size: 0.8rem;
}
div#main {
position: absolute;
top: 30;
left: 0;
padding: 1.6rem;
}
p#loading {
position: absolute;
bottom: 0;
right: 0;
padding: 1.6rem;
}
</style>js code 1:
<script>
const column = document.querySelector('nav ul li:nth-child(1) a');
column.addEventListener('mouseover', function() {
this.textContent = '我喜欢你，我想和你在一起';
});
column.addEventListener('mouseout', function() {
this.textContent = '✨ 某名字（例：逆境清醒）';
});
</script>js code 2:
<script>
(function () {
'use strict';
window.addEventListener('load', function () {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return false;
}
/********************
Animation
********************/
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (cb) {
setTimeout(cb, 17);
};
/********************
Random Number
********************/
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
/********************
Var
********************/
// canvas
var ctx = canvas.getContext('2d');
var X = canvas.width = window.innerWidth;
var Y = canvas.height = window.innerHeight-200;
var mouseX = X / 2;
var mouseY = Y / 2;
// heart
var miniHeartNum = 100;
var miniHearts =[];
var rad = Math.PI / 180;
var GRAVITY = 0.01;
/********************
Text
********************/
var fontSize = '64px Arial';
if (X < 768) {
fontSize = '24px Arial';
}
function drawtext() {
ctx.fillStyle = 'rgb(255, 3, 131)';
ctx.globalAlpha = 0.7;
ctx.textBaseline = 'middle';
ctx.font = fontSize;
ctx.textAlign = 'center';
ctx.fillText("❤️ 七夕节快乐！", X / 2-150, Y / 2);
}
/********************
Particle
********************/
// var
var particleNum = 50;
var particles = [];
var particleColors = ['rgb(0, 172, 176)', 'rgb(253, 191, 16)', 'rgb(237, 26, 36)', 'rgb(241, 87, 49)', 'rgb(246, 149, 153)'];
function Particle(ctx, x, y, r) {
this.ctx = ctx;
this.init(x, y, r);
}
Particle.prototype.init = function(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.l = rand(0, 5);
this.a = 0.5;
this.c = particleColors[rand(0, particleColors.length - 1)];
this.v = {
x: rand(-2, 2) * Math.random(),
y: rand(-2, 2) * Math.random()
};
};
Particle.prototype.updateParams = function() {
this.l -= 0.1;
this.r += 0.1;
};
Particle.prototype.updatePosition = function() {
this.x += this.v.x;
this.y += this.v.y;
};
Particle.prototype.wrapPosition = function() {
if (this.l < 0) {
var miniHeart = new MiniHeart(ctx, this.x, this.y, this.r, this.c);
miniHearts.push(miniHeart);
this.x = mouseX;
this.y = mouseY;
this.l = rand(10, 20);
this.r = 1;
}
};
Particle.prototype.draw = function() {
ctx = this.ctx;
ctx.save();
ctx.beginPath();
ctx.globalAlpha = this.a;
ctx.fillStyle = this.c;
ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.restore();
};
Particle.prototype.resize = function() {
this.x = rand(0, X);
this.y = rand(0, Y);
};
Particle.prototype.render = function() {
this.updatePosition();
this.updateParams();
this.wrapPosition();
this.draw();
};
for (var i = 0; i < particleNum; i++) {
var particle = new Particle(ctx, mouseX, mouseY, 1);
particles.push(particle);
}
/********************
MiniHeart
********************/
function MiniHeart(ctx, x, y, r, c) {
this.ctx = ctx;
this.init(x, y, r, c);
}
MiniHeart.prototype.init = function (x, y, r, c) {
this.ctx = ctx;
this.r = r;
this.x1 = x;
this.y1 = y;
this.a = -90;
this.c = c;
this.num = 22.5;
this.l = rand(10, 20);
this.alpha = 0.8;
this.v = {
x: 0,
y: 2
};
this.x2 = this.x1 + this.r * Math.cos(this.a * rad);
this.y2 = this.y1 + this.r * Math.sin(this.a * rad);
this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad);
this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad);
this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad);
this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad);
this.chord = 2 * this.r * Math.sin(this.num * rad / 2);
};
MiniHeart.prototype.draw = function () {
ctx = this.ctx;
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.c;
ctx.strokeStyle = this.c;
ctx.globalAlpha = this.alpha;
ctx.moveTo(this.x2, this.y2);
ctx.arc(this.cx1, this.cy1, this.chord, (270 + this.a) * rad, (270 + this.a + 225) * rad);
ctx.lineTo(this.x1, this.y1);
ctx.closePath();
ctx.fill();
ctx.moveTo(this.x2, this.y2);
ctx.arc(this.cx2, this.cy2, this.chord, (90 + this.a) * rad, (90 + this.a + 135) * rad, true);
ctx.lineTo(this.x1, this.y1);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
};
MiniHeart.prototype.updateParams = function() {
this.l -= 0.1;
this.r += 0.05;
this.x2 = this.x1 + this.r * Math.cos(this.a * rad);
this.y2 = this.y1 + this.r * Math.sin(this.a * rad);
this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad);
this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad);
this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad);
this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad);
this.chord = 2 * this.r * Math.sin(this.num * rad / 2);
};
MiniHeart.prototype.deleteHeart = function(i) {
if (this.y < 0) {
miniHearts.splice(i, 1);
}
};
MiniHeart.prototype.updatePosition = function() {
this.y1 -= this.v.y;
this.y2 -= this.v.y;
this.cy1 -= this.v.y;
this.cy2 -= this.v.y;
};
MiniHeart.prototype.render = function (i) {
this.updateParams();
this.updatePosition();
this.deleteHeart(i);
this.draw();
};
/********************
Render
********************/
function render() {
ctx.clearRect(0, 0, X, Y);
for (var i = 0; i < particles.length; i++) {
particles[i].render();
}
for (var i = 0; i < miniHearts.length; i++) {
miniHearts[i].render();
}
drawtext();
requestAnimationFrame(render);
}
render();
/********************
Event
********************/
function onResize() {
X = canvas.width = window.innerWidth;
Y = canvas.height = window.innerHeight;
if (X < 768) {
fontSize = '24px Arial';
} else {
fontSize = '64px Arial';
}
}
window.addEventListener('resize', function () {
onResize();
});
window.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
});
window.addEventListener('touchmove', function(e) {
if (e.targetTouches.length === 1) {
var touch = event.targetTouches[0];
mouseX = touch.pageX;
mouseY = touch.pageY;
}
}, false);
});
// Author
console.log('File Name / happyValentine.js\nCreated Date / February 5, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
})();
</script>The html structure is as follows:
To run, you need to put the previous css and js code into the corresponding position. Or you can directly skip to 3.4 of this article to copy and download the complete "Valentine's Valentine's Day Confession of Love Animated Web Page Special Effects"
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>情人节表白爱心动画特效</title>
<link rel="stylesheet" href="">
<style>
<!-- 此处镶嵌css代码 -->
</style>
</head>
<body>
<div id="contents">
<canvas id="canvas" width="1482" height="714">This browser cannot use a canvas.</canvas>
<div id="container">
<nav>
<ul>
<li><h1><a href="#">✨ 某名字（例：逆境清醒）</a></h1></li>
</ul>
<ul>今天是七夕节，听说在七夕这天恋人相互说句我爱你，就能在来年七夕不会分开，如果每年都说就永远不会分开。请把鼠标移到到你名字上，我想跟你说的话就在那里</ul>
</nav>
<script>
<!-- 此处镶嵌js1代码 -->
</script>
</div>
</div>
<script>
<!-- 此处镶嵌js2代码 -->
</script>
</body>
</html>3.3. Resource download
Background image: After downloading, place it in the same directory as the html file.
3.4, complete code
Instructions:
(1) Copy the complete code below and save it as: your file name.html
(2) Please download the background picture of 3.3 and put it in the same directory as the html file, save it as: flower2.jpg
(3) Run your file name.html, you can see the same web page effects as this article
(4) Change my default displayed name part "✨ a certain name (example: sober in adversity)" to your own needs
(5) Description of common problems ----- "Click here: Instructions for copying webpage special effect codes
(6) I wish you a happy holiday.
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>情人节表白满屏爱心动画特效</title>
<link rel="stylesheet" href="">
<style>
body {
background: #f2f2f2;
color: #333;
font-family: Arial, sans-serif;
background: url("flower2.jpg") no-repeat center;
background-size: 100%;
}
#container {
width: 700px;
max-width: 700px;
margin: 0 auto;
text-align: center;
padding: 30px;
background:#f26ab4;
-webkit-animation: bg-spin 3s linear infinite;
animation: bg-spin 3s linear infinite;
border-style: double;
border-radius: 20px;
padding: 25px 25px;
//background: skyblue;
opacity: 1;
--border-size: 9px;
--border-angle: 0turn;
background-image: conic-gradient(from var(--border-angle), #e7f0fd, #e7f0fd 50%, #e7f0fd), conic-gradient(from var(--border-angle), transparent 30%, #08f, #f02e1c);
background-size: calc(99% - (var(--border-size) * 2)) calc(99% - (var(--border-size) * 2)), cover;
background-position: center center;
background-repeat: no-repeat;
}
@-webkit-keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
@keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
h1 {
font-size: 48px;
//margin-bottom: 30px;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0 20px;
}
nav ul li a {
color: #333;
text-decoration: none;
font-size: 20px;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #f26ab4;
font-weight: bold;
cursor: pointer;
}
h1 {
font-size: 1.6rem;
}
h2 {
padding: 0.8rem 0 0 0;
}
p {
padding: 0.8rem 0;
font-size: 0.8rem;
}
div#main {
position: absolute;
top: 30;
left: 0;
padding: 1.6rem;
}
p#loading {
position: absolute;
bottom: 0;
right: 0;
padding: 1.6rem;
}
</style>
</head>
<body>
<div id="contents">
<canvas id="canvas" width="1482" height="714">This browser cannot use a canvas.</canvas>
<div id="container">
<nav>
<ul>
<li><h1><a href="#">✨ 某名字（例：逆境清醒）</a></h1></li>
</ul>
<ul>今天是七夕节，听说在七夕这天恋人相互说句我爱你，就能在来年七夕不会分开，如果每年都说就永远不会分开。请把鼠标移到到你名字上，我想跟你说的话就在那里</ul>
</nav>
<script>
const column = document.querySelector('nav ul li:nth-child(1) a');
column.addEventListener('mouseover', function() {
this.textContent = '我喜欢你，我想和你在一起';
});
column.addEventListener('mouseout', function() {
this.textContent = '✨ 某名字（例：逆境清醒）';
});
</script>
</div>
</div>
<script>
(function () {
'use strict';
window.addEventListener('load', function () {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return false;
}
/********************
Animation
********************/
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (cb) {
setTimeout(cb, 17);
};
/********************
Random Number
********************/
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
/********************
Var
********************/
// canvas
var ctx = canvas.getContext('2d');
var X = canvas.width = window.innerWidth;
var Y = canvas.height = window.innerHeight-200;
var mouseX = X / 2;
var mouseY = Y / 2;
// heart
var miniHeartNum = 100;
var miniHearts =[];
var rad = Math.PI / 180;
var GRAVITY = 0.01;
/********************
Text
********************/
var fontSize = '64px Arial';
if (X < 768) {
fontSize = '24px Arial';
}
function drawtext() {
ctx.fillStyle = 'rgb(255, 3, 131)';
ctx.globalAlpha = 0.7;
ctx.textBaseline = 'middle';
ctx.font = fontSize;
ctx.textAlign = 'center';
ctx.fillText("❤️ 七夕节快乐！", X / 2-150, Y / 2);
}
/********************
Particle
********************/
// var
var particleNum = 50;
var particles = [];
var particleColors = ['rgb(0, 172, 176)', 'rgb(253, 191, 16)', 'rgb(237, 26, 36)', 'rgb(241, 87, 49)', 'rgb(246, 149, 153)'];
function Particle(ctx, x, y, r) {
this.ctx = ctx;
this.init(x, y, r);
}
Particle.prototype.init = function(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.l = rand(0, 5);
this.a = 0.5;
this.c = particleColors[rand(0, particleColors.length - 1)];
this.v = {
x: rand(-2, 2) * Math.random(),
y: rand(-2, 2) * Math.random()
};
};
Particle.prototype.updateParams = function() {
this.l -= 0.1;
this.r += 0.1;
};
Particle.prototype.updatePosition = function() {
this.x += this.v.x;
this.y += this.v.y;
};
Particle.prototype.wrapPosition = function() {
if (this.l < 0) {
var miniHeart = new MiniHeart(ctx, this.x, this.y, this.r, this.c);
miniHearts.push(miniHeart);
this.x = mouseX;
this.y = mouseY;
this.l = rand(10, 20);
this.r = 1;
}
};
Particle.prototype.draw = function() {
ctx = this.ctx;
ctx.save();
ctx.beginPath();
ctx.globalAlpha = this.a;
ctx.fillStyle = this.c;
ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.restore();
};
Particle.prototype.resize = function() {
this.x = rand(0, X);
this.y = rand(0, Y);
};
Particle.prototype.render = function() {
this.updatePosition();
this.updateParams();
this.wrapPosition();
this.draw();
};
for (var i = 0; i < particleNum; i++) {
var particle = new Particle(ctx, mouseX, mouseY, 1);
particles.push(particle);
}
/********************
MiniHeart
********************/
function MiniHeart(ctx, x, y, r, c) {
this.ctx = ctx;
this.init(x, y, r, c);
}
MiniHeart.prototype.init = function (x, y, r, c) {
this.ctx = ctx;
this.r = r;
this.x1 = x;
this.y1 = y;
this.a = -90;
this.c = c;
this.num = 22.5;
this.l = rand(10, 20);
this.alpha = 0.8;
this.v = {
x: 0,
y: 2
};
this.x2 = this.x1 + this.r * Math.cos(this.a * rad);
this.y2 = this.y1 + this.r * Math.sin(this.a * rad);
this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad);
this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad);
this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad);
this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad);
this.chord = 2 * this.r * Math.sin(this.num * rad / 2);
};
MiniHeart.prototype.draw = function () {
ctx = this.ctx;
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.c;
ctx.strokeStyle = this.c;
ctx.globalAlpha = this.alpha;
ctx.moveTo(this.x2, this.y2);
ctx.arc(this.cx1, this.cy1, this.chord, (270 + this.a) * rad, (270 + this.a + 225) * rad);
ctx.lineTo(this.x1, this.y1);
ctx.closePath();
ctx.fill();
ctx.moveTo(this.x2, this.y2);
ctx.arc(this.cx2, this.cy2, this.chord, (90 + this.a) * rad, (90 + this.a + 135) * rad, true);
ctx.lineTo(this.x1, this.y1);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
};
MiniHeart.prototype.updateParams = function() {
this.l -= 0.1;
this.r += 0.05;
this.x2 = this.x1 + this.r * Math.cos(this.a * rad);
this.y2 = this.y1 + this.r * Math.sin(this.a * rad);
this.cx1 = this.x1 + this.r * Math.cos((this.a + this.num) * rad);
this.cy1 = this.y1 + this.r * Math.sin((this.a + this.num) * rad);
this.cx2 = this.x1 + this.r * Math.cos((this.a - this.num) * rad);
this.cy2 = this.y1 + this.r * Math.sin((this.a - this.num) * rad);
this.chord = 2 * this.r * Math.sin(this.num * rad / 2);
};
MiniHeart.prototype.deleteHeart = function(i) {
if (this.y < 0) {
miniHearts.splice(i, 1);
}
};
MiniHeart.prototype.updatePosition = function() {
this.y1 -= this.v.y;
this.y2 -= this.v.y;
this.cy1 -= this.v.y;
this.cy2 -= this.v.y;
};
MiniHeart.prototype.render = function (i) {
this.updateParams();
this.updatePosition();
this.deleteHeart(i);
this.draw();
};
/********************
Render
********************/
function render() {
ctx.clearRect(0, 0, X, Y);
for (var i = 0; i < particles.length; i++) {
particles[i].render();
}
for (var i = 0; i < miniHearts.length; i++) {
miniHearts[i].render();
}
drawtext();
requestAnimationFrame(render);
}
render();
/********************
Event
********************/
function onResize() {
X = canvas.width = window.innerWidth;
Y = canvas.height = window.innerHeight;
if (X < 768) {
fontSize = '24px Arial';
} else {
fontSize = '64px Arial';
}
}
window.addEventListener('resize', function () {
onResize();
});
window.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
});
window.addEventListener('touchmove', function(e) {
if (e.targetTouches.length === 1) {
var touch = event.targetTouches[0];
mouseX = touch.pageX;
mouseY = touch.pageY;
}
}, false);
});
// Author
console.log('File Name / happyValentine.js\nCreated Date / February 5, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
})();
</script>
</body>
</html>4. Other Valentine's Day web page effects
Unique, original, beautiful and romantic Valentine's Day confession album, (copy is available) (html5, css3, svg) confession love code (1)
Unique, original, beautiful and romantic Valentine's Day confession album, (copy is available) (html5, css3, svg) confession love code (2)
Unique, original, beautiful and romantic Valentine's Day confession album, (copy is available) (html5, css3, svg) confession love code (3)
Unique, original, beautiful and romantic Valentine's Day confession album, (copy is available) (html5, css3, svg) confession love code (4)
Recommended reading:
|
|
|
|
| Tomcat11, tomcat10 installation configuration (Windows environment) (detailed graphics) |
Tomcat startup flashback problem solving set (eight categories in detail) |
|
