html5制作⼀款超好看的点赞爱⼼⽓泡特效基于canvas点击圆形爱⼼按钮，喷出爱⼼⽓泡动画特效。这是⼀款点赞喜欢爱⼼特效。
css代码
<style>
body {
background-color: rgba(255, 137, 164, 0.2);
background-size: cover;
background-repeat: no-repeat;
}
.liker {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
}
.liker span {
position: absolute;
font-family: monospace;
color: #F92A82;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
}
.
btn {
width: 50px;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border-radius: 50%;
border: none;
svg canvas
position: absolute;
cursor: pointer;
left: 50%;
transform: translate(-50%, -10%);
background-color: #FF4D80;
color: #fff;
outline: none;
transition: 0.3s ease;
box-shadow: 0 3px 10px #F92A82;
}
.btn svg {
fill: #fff;
}
.btn:hover {
background-color: #F92A82;
}
</style>
html代码
<div class="liker">
<canvas class="hearts-canvas"></canvas>
<button class="btn">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
</svg>
</button>
<span>快来点赞吧</span>
</div>
javascript代码
<script>
class HeartsFlow {
constructor(data) {
this.el = document.querySelector(data.canvasEl);
this.w = 200;
this.h = 400;
< = Context('2d');
'255, 137, 164', //'#FF89A4',
'239, 121, 138', //'#EF798A',
'255, 77, 128', //'#FF4D80',
'249, 42, 130' //'#F92A82'
];
this.heartsAmount = data.amount;
this.heartsList = [];
this.isAnimate = false;
this.raf = null;
this.animate = this.animate.bind(this);
this.paintHeart = this.paintHeart.bind(this);
this.stopAnimation = this.stopAnimation.bind(this);
this.init();
}
getRandomColor() {
lors[Math.floor(Math.random() * lors.length)];
}
getRandom(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
setHeartsList() {
let arr = [];
for (let i = 0; i < this.heartsAmount; i++) {
let currentSize = Random(10, 15);
let dt = {
x: this.w / 2,
y: this.h,
bx: this.w / 2,
by: this.h,
pos: this.h,
_osp: Random(200, 400) / 100,
osp: Random(11, 12) / 10,
vsp: Random(currentSize, currentSize + i * 2) / 1000,
size: currentSize,
color: RandomColor(),
alfa: 1 };
arr.push(dt);
}
this.heartsList = [...this.heartsList, ...arr];
}
getCoordinates({ x, y, size, color, bx, by, _osp, osp, vsp, pos, alfa }) {
return {
xst: x,
yst: y + size / 2,
x0: x - size / 1.4,
y0: y + size / 4,
x1: x - size / 1.3,
y1: y - size / 1.3,
_x0: x + size / 1.4,
_y0: y + size / 4,
_x1: x + size / 1.3,
_y1: y - size / 1.3,
xfn: x,
yfn: y - size / 3,
bx: bx,
by: by,
_osp: _osp,
osp: osp,
vsp: vsp,
pos: pos,
alfa: alfa,
size: size,
color: color };
}
paintHeart({ xst, yst, x0, y0, _x0, _y0, x1, y1, _x1, _y1, xfn, yfn, color, alfa }) {  lobalCompositeOperation = "lighter";
}
mutateData() {
this.heartsList = this.heartsList.map(item => {
let pos = item.pos - 0.05;
let x = item.x + Math.sin(pos * item._osp) * ((pos - item.by) / item.osp);
let y = pos + (pos - item.by) / item.vsp * 1.6;
let alfa = alize0between1(0, this.h, y).toFixed(1);
return {
...item, x: x, y: y, pos: pos, alfa: alfa };
});
this.heartsList = this.heartsList.filter(item => item.y > 0);
}
normalize0between1(min, max, value) {
return (value - min) / (max - min);
}
setCanvas() {
this.el.width = this.w;
this.el.height = this.h;
}
startAnimation() {
if (!this.isAnimate) {
this.isAnimate = true;
console.log('start animation');
this.setHeartsList();
this.animate();
} else {
this.setHeartsList();
}
}
stopAnimation() {
this.isAnimate = false;
console.log('stop animation');
cancelAnimationFrame(this.raf);
}
animate() {
if (this.isAnimate) {
for (let i = 0, len = this.heartsList.length; i < len; i++) {
let hrt = Coordinates(this.heartsList[i]);
this.paintHeart(hrt);
}
this.mutateData();
}
this.raf = requestAnimationFrame(this.animate);
if (this.heartsList.length === 0 && this.isAnimate) {
this.stopAnimation();
}
}
init() {
this.setCanvas();
this.setHeartsList();
this.animate();
}}
let ht = new HeartsFlow({
canvasEl: '.hearts-canvas',
amount: 20 });
let btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
ht.startAnimation();
});
</script>
在这⾥我就不展⽰效果图了，⼤家到⾃⼰浏览器观看吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。