2025年3月17日 星期一 甲辰(龙)年 月十六 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

点赞喜欢爱心气泡特效

时间:08-26来源:作者:点击数:19
在这里插入图片描述

CSS样式

  • 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;
  • 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;
  • }

js代码

  • class HeartsFlow {
  • constructor(data) {
  • this.el = document.querySelector(data.canvasEl);
  • this.w = 200;
  • this.h = 400;
  • this.ctx = this.el.getContext('2d');
  • this.colors = [
  • '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() {
  • return this.colors[Math.floor(Math.random() * this.colors.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 = this.getRandom(10, 15);
  • let dt = {
  • x: this.w / 2,
  • y: this.h,
  • bx: this.w / 2,
  • by: this.h,
  • pos: this.h,
  • _osp: this.getRandom(200, 400) / 100,
  • osp: this.getRandom(11, 12) / 10,
  • vsp: this.getRandom(currentSize, currentSize + i * 2) / 1000,
  • size: currentSize,
  • color: this.getRandomColor(),
  • 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 }) {
  • this.ctx.globalCompositeOperation = "lighter";
  • this.ctx.beginPath();
  • this.ctx.moveTo(xst, yst);
  • this.ctx.bezierCurveTo(x0, y0, x1, y1, xfn, yfn);
  • this.ctx.moveTo(xst, yst);
  • this.ctx.bezierCurveTo(_x0, _y0, _x1, _y1, xfn, yfn);
  • this.ctx.fillStyle = `rgba(${color}, ${alfa})`;
  • this.ctx.strokeStyle = `rgba(${color}, ${alfa})`;
  • this.ctx.fill();
  • this.ctx.stroke();
  • this.ctx.closePath();
  • }
  • 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 = this.normalize0between1(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() {
  • this.ctx.clearRect(0, 0, this.w, this.h);
  • if (this.isAnimate) {
  • for (let i = 0, len = this.heartsList.length; i < len; i++) {
  • let hrt = this.getCoordinates(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();
  • });

html使用模板,记得引入上面的css和js

  • <div class="liker">
  • <canvas class="hearts-canvas" width="200" height="400"></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>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门