HTML+CSS+JS实现 ❤️canvas酷炫表白爱心动画❤️

 🍅 作者主页:Java李杨勇 

🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我,都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示: 文末获取源码 

代码目录:

主要代码实现:

CSS样式:

  body {font-family: Monospace;background-color: #f0f0f0;margin: 0px;overflow: hidden;}

HTML代码 :

<script>var container;var camera, scene, renderer;var group, text, plane;var targetRotation = 0;var targetRotationOnMouseDown = 0;var mouseX = 0;var mouseXOnMouseDown = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var heartShape, particleCloud, sparksEmitter, emitterPos;var _rotation = 0;var timeOnShapePath = 0;init();animate();function init() {container = document.createElement('div');document.body.appendChild(container);//相机camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);camera.position.set(0, 150, 800);//场景scene = new THREE.Scene();group = new THREE.Group();scene.add(group);// Get text from hashvar string = "xiaorui";var hash = document.location.hash.substr(1);if (hash.length !== 0) {string = hash;}var text3d = new THREE.TextGeometry(string, {size: 80,height: 20,curveSegments: 2,font: "helvetiker"});text3d.computeBoundingBox();var centerOffset = -0.5 * (text3d.boundingBox.max.x - text3d.boundingBox.min.x);var textMaterial = new THREE.MeshBasicMaterial({color: Math.random() * 0xffffff,overdraw: 0.5});text = new THREE.Mesh(text3d, textMaterial);// Potentially, we can extract the vertices or faces of the text to generate particles too.// Geo > Vertices > Positiontext.position.x = centerOffset;text.position.y = 100;text.position.z = 0;text.rotation.x = 0;text.rotation.y = Math.PI * 2;group.add(text);particleCloud = new THREE.Object3D(); // Just a groupparticleCloud.y = 800;group.add(particleCloud);// Create Particle Systems// Heartvar x = 0,y = 0;heartShape = new THREE.Shape();heartShape.moveTo(x + 25, y + 25);heartShape.bezierCurveTo(x + 25, y + 25, x + 20, y, x, y);heartShape.bezierCurveTo(x - 30, y, x - 30, y + 35, x - 30, y + 35);heartShape.bezierCurveTo(x - 30, y + 55, x - 10, y + 77, x + 25, y + 95);heartShape.bezierCurveTo(x + 60, y + 77, x + 80, y + 55, x + 80, y + 35);heartShape.bezierCurveTo(x + 80, y + 35, x + 80, y, x + 50, y);heartShape.bezierCurveTo(x + 35, y, x + 25, y + 25, x + 25, y + 25);var hue = 0;var hearts = function(context) {context.globalAlpha = 0.5;var x = 0,y = 0;context.scale(0.05, -0.05); // Scale so canvas render can redraw within boundscontext.beginPath();// From http://blog.burlock.org/html5/130-pathscontext.bezierCurveTo(x + 2.5, y + 2.5, x + 2.0, y, x, y);context.bezierCurveTo(x - 3.0, y, x - 3.0, y + 3.5, x - 3.0, y + 3.5);context.bezierCurveTo(x - 3.0, y + 5.5, x - 1.0, y + 7.7, x + 2.5, y + 9.5);context.bezierCurveTo(x + 6.0, y + 7.7, x + 8.0, y + 5.5, x + 8.0, y + 3.5);context.bezierCurveTo(x + 8.0, y + 3.5, x + 8.0, y, x + 5.0, y);context.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);context.fill();context.lineWidth = 0.5; //0.05context.stroke();}var setTargetParticle = function() {var material = new THREE.SpriteCanvasMaterial({program: hearts});material.color.setHSL(hue, 1, 0.75);hue += 0.001;if (hue > 1)hue -= 1;particle = new THREE.Sprite(material);particle.scale.x = particle.scale.y = Math.random() * 40 + 40;particleCloud.add(particle);return particle;};var onParticleCreated = function(p) {p.target.position.copy(p.position);};var onParticleDead = function(particle) {particle.target.visible = false;particleCloud.remove(particle.target);};sparksEmitter = new SPARKS.Emitter(new SPARKS.SteadyCounter(160));emitterpos = new THREE.Vector3();sparksEmitter.addInitializer(new SPARKS.Position(new SPARKS.PointZone(emitterpos)));sparksEmitter.addInitializer(new SPARKS.Lifetime(0, 2));sparksEmitter.addInitializer(new SPARKS.Target(null, setTargetParticle));sparksEmitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0, -50, 10))));// TOTRY Set velocity to move away from centroidsparksEmitter.addAction(new SPARKS.Age());//sparksEmitter.addAction(new SPARKS.Accelerate(0.2));sparksEmitter.addAction(new SPARKS.Move());sparksEmitter.addAction(new SPARKS.RandomDrift(50, 50, 2000));sparksEmitter.addCallback("created", onParticleCreated);sparksEmitter.addCallback("dead", onParticleDead);sparksEmitter.addCallback("updated", function(particle) {particle.target.position.copy(particle.position);});sparksEmitter.start();// End Particlesrenderer = new THREE.CanvasRenderer();renderer.setClearColor(0xf0f0f0);renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(renderer.domElement);document.addEventListener('mousedown', onDocumentMouseDown, false);document.addEventListener('touchstart', onDocumentTouchStart, false);document.addEventListener('touchmove', onDocumentTouchMove, false);//window.addEventListener('resize', onWindowResize, false);}function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}//document.addEventListener('mousemove', onDocumentMouseMove, false);function onDocumentMouseDown(event) {event.preventDefault();mouseXOnMouseDown = event.clientX - windowHalfX;targetRotationOnMouseDown = targetRotation;if (sparksEmitter.isRunning()) {sparksEmitter.stop();} else {sparksEmitter.start();}}function onDocumentMouseMove(event) {mouseX = event.clientX - windowHalfX;targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;}function onDocumentTouchStart(event) {if (event.touches.length == 1) {event.preventDefault();mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;targetRotationOnMouseDown = targetRotation;}}function onDocumentTouchMove(event) {if (event.touches.length == 1) {event.preventDefault();mouseX = event.touches[0].pageX - windowHalfX;targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;}}//function animate() { //更新场景requestAnimationFrame(animate);render();}function render() {timeOnShapePath += 0.0337;if (timeOnShapePath > 1)timeOnShapePath -= 1;// TODO Create a PointOnShape Action/Zone in the particle enginevar pointOnShape = heartShape.getPointAt(timeOnShapePath);emitterpos.x = pointOnShape.x * 5 - 100;emitterpos.y = -pointOnShape.y * 5 + 400;// Pretty cool effect if you enable this// particleCloud.rotation.y += 0.05;group.rotation.y += (targetRotation - group.rotation.y) * 0.05;renderer.render(scene, camera);}</script>

上面的JS文件需要引入

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~!

打卡 文章 更新 44  /  100天

精彩推荐更新中:

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562002.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML+CSS+JS实现 ❤️酷炫HUD科幻数据屏幕动画界面❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

java 条件 等待_java – 如何唤醒等待相同条件的所有线程?

我有以下情况.几个线程正在等待相同的条件.当得到通知时,所有应该停止等待,更改标志并返回对象&#xff1a;public Object getObject(){lock.lock();try {while (check)){condition.await();}return returnObjectAndSetCheckToFalse();} finally {lock.unlock();}}但是这段代码…

基于Springboot+Mybatis实现个人理财系统

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

java 递归遍历对象所有属性_Java学习之Xml系列二:xml按条件查询、xml递归遍历所有元素和属性...

xml中加入了几条&#xff0c;为了方便查询时作为示例。话不多说见代码注释&#xff1a;DTD文件&#xff1a;SwordTypeDefinition.dtdXML文件&#xff1a;SwordLib.xmlSwordLibrary SYSTEM "SwordTypeDefinition.dtd">欢欣之刃100010夜叉205030魔棒2000java代码&am…

HTML+CSS+JS实现 ❤️酷炫3D瀑布流动画特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

java 取dataset_Java LineDataSet.getYVals方法代码示例

import com.github.mikephil.charting.data.LineDataSet; //导入方法依赖的package包/类protected void drawCircles(Canvas c) {mRenderPaint.setStyle(Paint.Style.FILL);float phaseX mAnimator.getPhaseX();float phaseY mAnimator.getPhaseY();List dataSets mChart.ge…

HTML+CSS+JS实现 ❤️canvas圆形水波进度条动画特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

HTML+CSS+JS实现 ❤️圆圈波纹动画特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

java 二叉树迭代器_C,为二叉树实现自定义迭代器(长)

请你好 - 这是我的第一个问题 . P基本上作为夏季项目&#xff0c;我一直在浏览wikipedia page上的数据结构列表并尝试实现它们 . 我上学期参加了一门C课程并发现它非常有趣&#xff0c;作为我实施二项式堆的最后一个项目 - 这也非常有趣 . 也许我很讨厌&#xff0c;但我喜欢数…

java防止编码重复_java – 如何避免许多小类的代码重复?

我有不同的课程,分别是英语,西班牙语,法语等&#xff1a;Class English{String name "English";String alias "ENG";}Class French{String name "French";String alias "Fre";}与其他语言类似.还有一个叫做语言的课&#xff1a;Cl…

HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

ldap协议 java_java如何调用ldap协议【LdapContext】

背景&#xff1a;做了个系统需要用集团的用户id登录。而集团用户系统是用ldap做的。关键知识点1. 设置连接ctx new InitialLdapContext(env, connCtls);2.设置url和查询的子路径env.put(Context.PROVIDER_URL, URL);// LDAP serverenv.put(Context.SECURITY_PRINCIPAL, SEARCH…

HTML+CSS+JS实现 ❤️经典霓虹灯英文字母特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

操作系统分区分配java算法_合肥工业大学操作系统课程设计 动态分区分配存储管理java版.doc...

合肥工业大学操作系统课程设计 动态分区分配存储管理java版.doc 1课程设计动态分区分配存储管理设计题目学号专业班级学生姓名号指导教师22010年12月合肥工业大学课程设计任务书设计题目动态分区分配存储管理成绩主要内容动态分区分配存储管理建立描述内存分配状况的数据结构&a…

HTML+CSS+JS实现 ❤️感谢关注3D文字动画特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

java中字符串后加Box_字符串未显示在JavaFX中ComboBox的Tableview上

我一直在尝试在Java中显示我从组合框到表视图的选择 . 我花了好几个小时都在寻找解决方案&#xff0c;但没有用 . 我没有任何错误&#xff0c;但我似乎无法在TableView上显示一个字符串 . 我想请求帮助 .MainView.java有组合框和单击按钮的位置&#xff0c;它应该将组合框中的字…

HTML+CSS+JS实现 ❤️基于Javascript简单计算器特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

java font 字体 隶书_在font标记对,将字体设置成“隶书”,设置属性( )=隶书。...

字体夏季影响我国大部分地区的大气活动中心是太平洋高压和阿留申低压。Q0.0和Q0.1只要有一个继电器线圈先接通&#xff0c;记对另一个就不能再接通&#xff0c;从而保证任何时候两者都不能同时起动&#xff0c;这种控制方式称为()。按照工作方式的不同&#xff0c;设置书设置属…

HTML+CSS+JS实现 ❤️高光立体游戏卡片悬停ui特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &…

java获取500错误_HTTP 500错误

IIS5的HTTP 500内部服务器错误是我们经常碰到的错误之一&#xff0c;它的主要错误表现就是ASP程序不能浏览但HTM静态网页不受影响。另外当错误发生时&#xff0c;系统事件日志和安全事件日志都会有相应的记录。具体如下……一.错误表现IIS5的HTTP 500内部服务器错误是我们经常碰…