【手机端浏览】跳动的爱心代码--李峋爱心代码

已于 2024-04-07 23:10:45 修改
阅读量7.7k 收藏 27
点赞数 7
文章标签： github git 前端 html5 开发语言
于 2022-11-13 21:20:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/J_Jie_/article/details/127805535
版权

本文章介绍如何在手机端浏览跳动的爱心代码效果，跳动爱心可双指放缩和单指转动！
使用GitHub的代码托管功能，生成一个url在手机端浏览器中请求这个url即可看到跳动爱心！
内容分为两部分：第一部分为GitHub的仓库建立，第二部分是实现托管爱心代码。
关注微信公众号：「ClassmateJie」

image-20221102095317452

简介

最近随着电视剧《点燃我温暖你》的火热播出，剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈，作为一个喜欢动手实践的我来说正是一个大好机会啊，于是我就把代码搬到GitHub上并且使用GitHub的代码托管功能，实现无服务器部署静态网站，可在手机端浏览跳动爱心效果哦！
网站效果：https://0-1-j.github.io/love-code/
源码我放在了微信公众号：「ClassmateJie」 回复 爱心代码 大家有需自取哦~💗

今天周末了，大家都要好好吃饭，好好睡觉哦！🎉｜微信公众号：「ClassmateJie」

GitHub的仓库建立

1、首先建立一个GitHub仓库：进入GitHub点击新建仓库。
在这里插入图片描述
2、填写仓库信息：仓库名称最好是英文，比如love-code，其他都默认就行了。
在这里插入图片描述
3、上传代码文件到GitHub仓库：可直接上传文件或者是使用Git上传代码到仓库。Git的操作需要一定的编程基础，如果想理解Git可在微信公众号：「ClassmateJie」回复 Git
在这里插入图片描述

托管爱心代码，生成URL

4、GitHub仓库托管代码：使用GitHub的代码托管功能，实现静态网站的部署。
在这里插入图片描述
5、生成一个url在手机端打开即可：因为GitHub是国外网站，所以可能加载比较慢，等待一会即可。也可以在浏览器中打开，等待加载！
在这里插入图片描述

手机端浏览效果

6、手机端直接打开URL浏览即可：跳动爱心可双指放缩和单指转动，非常nice

随便写几行代码代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>爱心跳动,3D拖拽搬</title>
  <link rel="stylesheet" href="./css/style.css">

</head>

<body>

  <script src='./js/three.min.js'></script>
  <!-- <script src='./js/MeshSurfaceSampler.js'></script> -->
  <script src='./js/TrackballControls.js'></script>
  <script src='./js/simplex-noise.js'></script>
  <script src='./js/OBJLoader.js'></script>
  <script src='./js/gsap.min.js'></script>
  <script src="./js/script.js"></script>
   .....
</body>

</html>

在这里插入图片描述

关注微信公众号「 ClassmateJie」
更多惊喜等待你的发掘
ClassmateJie
关注
c语言简单心形代码(c语言简单心形代码手机版)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-25 1万+
c语言心形中间带字程序 #include #include voidput_ch(charch,inta,intb)//在a个空格后，显示b个字符ch inti; for(i=0;i printf("%c",'');//printf(""); for(i=0;i printf("%c",c...
C/C++李峋同款跳动的爱心代码（完整代码）
热门推荐
兔子王
06-16 9万+
C++语言打造出李峋同款跳动的爱心。
Python版李峋同款爱心代码来了！！
Python编程与实战的博客
11-16 2万+
爱心代码
李峋爱心代码
2301_79259514的博客
05-11 869
c语言，爱心代码
Web网页动态爱心代码绘制 附有源码
最新发布
Sea_yk的博客
09-23 1681
相信很多小伙伴希望可以给心爱的TA绘制一个超甜并且无限绽放的爱心，把网页发给对方对方用浏览器就能感受到你满满的心意，现在它来啦！
android 心形代码
03-09
利用android的绘制图形功能实现了一个心形图形，
满屏文字爱心代码(第5种爱心代码)
kelezimeiti的博客
07-16 7558
抖音爆款爱心代码源代码链接1：源代码链接2：源代码链接3：源代码链接1：源代码链接2：源代码链接3：源代码链接1：源代码链接2：源代码链接3：源代码链接1：源代码链接2：源代码链接3：源代码链接1：源代码链接2：源代码链接3：源代码链接1：源代码链接2：源代码链接3：往期推荐。
李峋同款爱心代码，表白神器！
weixin_51976923的博客
12-01 1978
自己写了个软件，实现超简单修改名字！
520快来了，李峋的爱心代码来了，快拿去表白吧
m0_73592256的博客
05-19 1051
要想换背景颜色只需要将代码中的white改为black。以下均用网页展示效果，手机电脑端都可以查看。
html跳动的心实现代码
weixin_30487701的博客
03-25 2820
<style> .box{ width: 200px; height: 400px; position: relative; margin: 30px auto; transform: all 0.5s; } ...
基于python的高级跳动爱心代码源码-表白.zip
01-17
python爱心代码高级基于python的高级跳动爱心代码源码-表白.zip基于python的高级跳动爱心代码源码-表白.zip基于python的高级跳动爱心代码源码-表白.zip基于python的高级跳动爱心代码源码-表白.zip基于python的高级...
基于HTML实现的爱心代码-爱心代码跳动效果.zip
05-13
在这个名为"基于HTML实现的爱心代码-爱心代码跳动效果.zip"的压缩包中，我们讨论的是如何利用HTML来创建一个动态的爱心图案，并实现跳动效果。 首先，HTML爱心通常是由多个`<span>`或`<div>`元素组合而成，通过设置...
跳动的爱心 丨李峋爱心代码 !附源码
02-24
跳动的爱心 丨李峋爱心代码 !【附源码】跳动的爱心 丨李峋爱心代码 !【附源码】跳动的爱心 丨李峋爱心代码 !【附源码】跳动的爱心 丨李峋爱心代码 !【附源码】跳动的爱心 丨李峋爱心代码 !【附源码】跳动的爱心 丨...
HTML李峋同款跳动的爱心代码（双爱心版）
兔子王
06-19 6万+
HTML李峋同款跳动的爱心（双爱心版）完整代码。
[Python]《点燃我，温暖你》李峋同款爱心代码
ZXW_NUDT的博客
11-16 1万+
《点燃我，温暖你》李峋同款爱心代码。 注意：代码原作者是【抖音：无所不能的法学生小黑】
同款爱心代码
编程技术提升
11-10 1509
会动的爱心
html动态爱心代码【附源码】
weixin_74268571的博客
03-13 2245
【代码】计时器的使用及爱心演示。完整代码案例，可使用记事本开发，简单实用
李峋同款爱心代码（附源码）
qq245454的博客
11-14 7万+
李峋同款浪漫爱心代码（快拿去给爸爸妈妈，给男（女）朋友看！！！）
如何让python在手机上运行,python程序在手机上运行
2301_81896552的博客
03-13 1314
大家好，本文将围绕python怎么在手机上运行爱心代码展开说明，python程序如何在手机端运行是一个很多人都想弄明白的事情，想搞清楚python程序怎么在手机上运行需要先了解以下几个事情。大家好，本文将围绕python在手机上怎么运行展开说明，手机怎么用python程序是一个很多人都想弄明白的事情，想搞清楚手机版的python怎么用需要先了解以下几个事情。大家好，小编来为大家解答以下问题，手机上的python怎么运行程序，手机的python怎么运行文件，今天让我们一起来看看吧！
c语言爱心代码动态3d
09-28
``` <!DOCTYPE html> <html> <head> <title></title> </head> <style> * { padding: 0; margin: 0; } html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } .aa { position: fixed; left: 50%; bottom: 10px; color: #ccc; } </style> <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.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> ``` ![示例图片](https://devbit-static.oss-cn-beijing.aliyuncs.com/devbit-static/img/heart.png)
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值