抖音爱心特效代码

已于 2022-11-09 23:18:55 修改
阅读量1.2w 收藏 195
点赞数 37
分类专栏： 笔记 文章标签： javascript 前端 css html5
于 2022-10-22 11:06:15 首次发布
原文链接：https://blog.csdn.net/qq_44731019/article/details/109597845
版权
本文介绍了一个使用HTML、CSS和JavaScript实现的爱心动画代码，通过修改特定行的文本，可以定制成对指定人物表达爱意的动画。详细步骤包括新建文本文件、修改文字内容、更改文件后缀并用浏览器打开。代码中包含关键部分的解释，如文字属性设置和粒子动画的实现，适合初学者学习和个性化定制。
摘要由CSDN通过智能技术生成

这是效果

在这里插入图片描述
这代码文件的百度网盘链接：
链接：https://pan.baidu.com/s/1uZmPcoesCifI5GqsT8NeOQ
提取码：1234

第一步新建文本文件，命名为loveme，随便写

在这里插入图片描述
打开文本文件把最下面代码复制到txt文件里面，把第4行和32行张小名改为你喜欢人的名字就好。
如下是设置爱心中间的文字属性的注释，在最下面代码的21到27行：

.child{
	position: relative;				
	top:45%;<!--文字上下对齐的比列，可以理解为垂直居中的比例-->
	text-align: center;<!--文字居中-->
	font-size: 18px;<!--文字大小-->
	color:#EA80B0;	<!--文字颜色-->			
}

再把文件名后缀改为html格式回车

在这里插入图片描述

双击自动选择浏览器打开，或者在打开方式选择你的浏览器打开

在这里插入图片描述

完整代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 张小名爱你（づ￣3￣）づ╭❤～</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}
			.child{
				position: relative;				
				top:45%;
				text-align: center;
				font-size: 18px;
				color:#EA80B0;				
			}
  </style>
 </HEAD>

 <BODY>
   <div class="child">张小名我LOVE你（づ￣3￣）づ╭❤～</div>
  <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.y = (typeof y !== 'undefined') ? y : 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.y * this.y);
    this.normalize();
    this.x *= length;
    this.y *= length;
    return this;
  };
  Point.prototype.normalize = function() {
    var length = this.length();
    this.x /= length;
    this.y /= 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, y, dx, dy) {
    this.position.x = x;
    this.position.y = y;
    this.velocity.x = dx;
    this.velocity.y = dy;
    this.acceleration.x = dx * settings.particles.effect;
    this.acceleration.y = dy * settings.particles.effect;
    this.age = 0;
  };
  Particle.prototype.update = function(deltaTime) {
    this.position.x += this.velocity.x * deltaTime;
    this.position.y += this.velocity.y * deltaTime;
    this.velocity.x += this.acceleration.x * deltaTime;
    this.velocity.y += this.acceleration.y * 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.y - 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, y, dx, dy) {
    particles[firstFree].initialize(x, y, 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) - 20 * 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 to create the path
    function to(t) {
      var point = pointOnHeart(t);
      point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
      point.y = settings.particles.size / 2 - point.y * 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>
lan_th
关注
专栏目录
【Python】【爱情代码】巧用Python实现无法拒绝的爱心动感代码（可修改文字版）（抖音同款）
金陵岂是池中物的博客
02-29 1316
【代码】【Python】【完整代码】巧用Python实现无法拒绝的爱心代码（可修改文字版）
html爱心烟花特效代码1.zip
最新发布
08-12
详细解析一个HTML爱心烟花特效的代码，我们需要从多个方面入手，包括HTML结构、CSS样式以及可能涉及的JavaScript（或特定库如jQuery、Three.js等）来动态生成和展示这些效果。由于直接编写一个完整的1000字以上代码解析超出了简单回答的范围，我将提供一个概念性的解析框架，并展示一些关键代码片段，以便你能够理解和构建这样的特效。
爱心代码HTML
weixin_67418985的博客
02-01 1138
particleRate = settings.particles.length / settings.particles.duration, //粒子/秒。velocity: 100, // 粒子速度（像素/秒）duration: 3, // 粒子持续时间（秒）length: 1000, // 最大颗粒量。size: 20, // 颗粒大小（像素）//helper函数创建路径。//使用虚拟画布创建粒子图像。// 创建和填充粒子池。* 把所有这些放在一起。
炫酷动态特效HTML实现源码【完整源码分享】
我要学Java_blog
12-29 8760
HTML炫酷特效 介绍 3D旋转魔方、爱心飘落、吹泡泡、抖音罗盘、黑客帝国代码雨、蝴蝶特效、画心、四叶草、烟花等特效 软件架构 html、JavaScript、css 使用说明 下载代码 点击HTML运行 特效展示 3D旋转魔方 还记得小时候玩过的魔方吗？一个网页就可以轻松玩转。 爱心飘落 漫天飘落的小心心，送给你的那个她/他，感受一下另一种特别的小浪漫。 吹泡泡 梦幻泡泡，带你进入一个充满梦的世界。 时刻罗盘 还可以用时刻罗盘体验一下古代的计时方式
抖音爆火李峋同款爱心代码，简单附带教程，还有烟花代码，手残党也能学会！！
m0_59162248的博客
11-11 7万+
最近看到抖音爆火的一些HTML代码，有人找"极客G"更新，今天用了几个小时给大家整理出来了下面几个代码，最简单的就是第一个爱心代码，第二个烟花代码可自定义文本，具体看下面。
html爱心特效代码
热门推荐
梦游星海的博客
10-26 44万+
<!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="Keywor...
html+css+js爱心代码
jiangcr123的博客
11-06 1万+
最近好像爱心代码很火
html爱心代码
weixin_74651230的博客
12-24 2269
简单的爱心代码
爱心代码-HTML
weixin_45019417的博客
11-10 7967
爱心代码，跳动的心
HTML爱心代码
weixin_48643746的博客
01-09 276
爱心代码(复制可用)
抖音爱心特效
08-27
【抖音爱心特效】是一种在抖音平台上流行的视频创作手法，它利用了HTML5和jQuery技术来构建一个温馨浪漫的爱心表白动画。这个特效通常用于制作情感丰富的视频，表达爱意或者增添视频的趣味性，吸引观众的注意力。在...
网页动画素材 原生JS制作爱心表白特效（抖音资料）
07-14
网页动画素材 原生JS制作爱心表白特效（抖音资料）网页动画素材 原生JS制作爱心表白特效（抖音资料）网页动画素材 原生JS制作爱心表白特效（抖音资料）网页动画素材 原生JS制作爱心表白特效（抖音资料）网页动画素材...
html5+canvas仿抖音直播爱心飘动点赞动画特效源码.zip
11-03
在这个“html5+canvas仿抖音直播爱心飘动点赞动画特效源码.zip”压缩包中，我们可以看到一个使用HTML5 Canvas元素实现的动画特效，其灵感来源于流行的短视频平台抖音中的直播点赞功能。 Canvas是HTML5中的一个核心...
爱心代码
u013780740的专栏
06-15 6093
#include #include #include #define I 20 //爱心的上半部分两个小半圆的半径 #define R 340 //爱心的下半部分圆弧曲线半径 int main() { FILE *fp; if((fp=fopen("爱心.txt","w"))==NULL) { printf("File open error!\n"); exit(0);
html爱心特效代码——爱心代码
weixin_52859229的博客
03-16 1340
爱心特效代码
情人节-动态爱心（h5+css+js）
weixin_42449711的博客
07-21 8万+
一、效果图 二、源代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&gt; *{ padding: 0; margin: 0; } html, body { height: 100%; paddi
爱心代码。
m0_73743462的博客
10-01 679
printf("语句")
抖音爱心代码python
10-21
这段Python代码可以用于批量取消抖音作品的喜欢。首先，需要设置抖音App的cookie，然后设置抖音作品的aweme_id。接着，使用for循环遍历所有的aweme_id，构建取消喜欢的接口url，最后发送post请求。具体代码如下： import requests # 设置抖音 App 的 cookie cookies = {'cookie': 'your_cookie'} # 设置抖音作品的 aweme_id aweme_ids = ['xxxx', 'xxxx', 'xxxx'] for aweme_id in aweme_ids: # 构建取消喜欢的接口 url = f'https://aweme.snssdk.com/aweme/v1/commit/item/digg/?aweme_id={aweme_id}' # 发送 post 请求 response = requests.post(url, cookies=cookies) # 输出取消喜欢结果 print(response.json())
评论 56
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值