七夕特辑——3D爱心（可监听鼠标移动）

已于 2023-12-22 01:51:44 修改
阅读量2w 收藏 122
点赞数 77
CC 4.0 BY-SA版权
文章标签： 3d 计算机外设 javascript 前端 web
于 2023-08-19 14:06:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Why_does_it_work/article/details/132379261
本文展示了如何创建一个3D爱心效果，利用Three.js库和HTML5 Canvas，结合鼠标监听事件调整爱心的3D旋转角度，实现鼠标移动时爱心转动的交互体验。还分享了一个HTML爱心和弹幕效果的实现。

前言

在这里插入图片描述
「作者主页」：雪碧有白泡泡
「个人网站」：雪碧的个人网站
「推荐专栏」：

★java一站式服务 ★
★ React从入门到精通★
★前端炫酷代码分享 ★
★ 从0到英雄，vue成神之路★
★ uniapp-从构建到提升★
★ 从0到英雄，vue成神之路★
★ 解决算法，一个专栏就够了★
★ 架构咱们从0说★
★ 数据流通的精妙之道★
★后端进阶之路★

请添加图片描述

文章目录

  • 前言
  • 先上效果
      • 点击运行后即可有如下效果，拖动鼠标即可
    • 代码
    • 鼠标监听并缩小爱心大小
  • 再分享一个html爱心+弹幕效果
      • 效果如下

先上效果


在这里插入图片描述
这里可以直接 看查源码内容， 刷新，最后一个是 放大跳转网页

点击运行后即可有如下效果，拖动鼠标即可

在这里插入图片描述

代码

要将这个爱心改为3D效果，需要进行以下几个步骤：

<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
李峋爱心代码源码（Python）
y2424022071的博客
11-10 1万+
【代码】李峋爱心代码源码（Python）
Cocos2D游戏之旅（一）：贝塞尔曲线画心形---花瓣桃心
【Cocos2D 学习笔记】晓石头的专栏
08-02 8119
一、贝塞尔曲线生成工具 工欲善其事必先利其器，好的工具能让你如虎添翼。Cocos2D中画贝塞尔曲线，最大的难点就是定坐标：起点、控制点一、控制点二、终点。嘿嘿，有了这个工具你就会感觉到神马是面朝大海，春暖花开，一片祥和的景象。进主题，先上图： 啊，你说你木有这个工具，这个好说，工具和源代码都本文末尾。 图1.1的左下角是贝塞尔曲线的四个点，对应到图中的 p
【Three.js】粒子爱心
饺子大魔王
03-02 4751
最近很火的电视剧《点燃我，温暖你》男主角学神和女主角课代表计算机考试实现的跳动的爱心，那我也来做一个粒子爱心送给女朋友。因为不想直接加载心形的模型文件作为基础，所以主要思路是三维直角坐标系内，通过心形函数绘制图形。然后呢，细化到空间中坐标粒子的发光闪烁特效。实现思路讲完了，讲一下性能优化，因为通过函数找心形表面粒子的过程是需要遍历的（没办法直接令函数直接=0，只能取＜0的然后取最大、最小值，再去重），多层遍历嵌套会降低页面加载速度，所以这里的思想是构建对象，因为去掉了一层循环，肯定是快很多的。
love_heart 3D爱心颗粒 旋转
最新发布
linqingc的博客
09-08 436
这是一个充满浪漫色彩的3D爱心动画网页，通过WebGL和Canvas技术创造出一个梦幻般的爱心世界。页面包含多种粒子效果、音效和交互功能，为用户带来沉浸式的视觉和听觉体验。✨ 主要特性。
【七夕活动精选】致你的七夕礼物——3D Heart，跳动的 3D 爱心
热门推荐
weixin_55751709的博客
11-30 1万+
【七夕活动精选】致你的七夕礼物——3D Heart，跳动的 3D 爱心
HTML5 + CSS3：打造炫酷3D爱心，让网页设计爱意满满
赵KK的博客
05-08 748
在网页设计的世界里，创意和技术的结合总能带来无限的可能。今天，我们将探索如何使用HTML5和CSS3来创造一个动态的3D爱心效果，让你的网页不仅美观，而且充满情感。这不仅是一次技术实践，更是一次浪漫的编程之旅。首先，我们需要一个HTML5的基础结构来承载我们的3D爱心。接下来，我们使用CSS3的3D转换来实现爱心的3D效果。为了让爱心动起来，我们可以添加一些简单的动画。
忽悠财务小姐姐神器（python实现3D爱心）
m0_73747952的博客
11-13 1287
最近在网上看到了很多粒子爱心的python源码，所以就突发奇想也做一个爱心，但是粒子爱心这么多人做了就没什么意思了，那我就来做一个3D粉嫩旋转爱心，要的就是别出心裁，出人意料。这发给财务小姐姐，我恏大力的春天不就来了！！
爱在七夕——中国七夕情人节ppt动态贺卡.rar
09-08
【标题】"爱在七夕——中国七夕情人节ppt动态贺卡.rar" 是一个压缩文件，其中包含了关于中国七夕情人节的动态PPT模板。这个标题暗示了内容是为庆祝七夕节，中国传统的浪漫节日，也被称为东方的情人节，而设计的。PPT...
鹊桥相会 情定七夕——中国情人节七夕ppt模板.rar
09-11
标题中的“鹊桥相会 情定七夕——中国情人节七夕ppt模板.rar”表明这是一个与七夕节相关的PPT模板，适用于制作关于中国情人节的演示文稿。七夕节，源自中国古代神话，是中国传统节日之一，被誉为东方的情人节。这个...
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
10-23
描述提到的知识点有：使用HTML5的Canvas技术实现3D效果的玫瑰花渐显效果，效果逼真自然，代码可参考。 标签提到的知识点有：JavaScript、HTML5、Canvas、七夕情人节、3D玫瑰花。 在HTML5的Canvas技术中，Canvas是...
七夕——情牵你我特别企划+凉夏换衣趣——商场七夕企划
12-21
相信与超市管理职业挂钩的你，可能需要了解一下七夕——情牵你我特别企划+凉夏换衣趣——商场七夕企划，...该文档为七夕——情牵你我特别企划+凉夏换衣趣——商场七夕企划，是一份很不错的参考资料，具有较高参考...
【HTML】跳动的3D爱心，发给你爱的人
2401_83020244的博客
03-03 1187
头部部分位于``<head>``标签中，它包含了网页的元数据和链接到外部文件，比如CSS样式表和JavaScript脚本文件。最常见的标签是``<h1>``到``<h6>``，它们用于定义标题的大小和重要性。``<p>``标签用于定义段落，``<a>``标签用于创建链接，``<img>``标签用于插入图像。主体部分位于``<body>``标签中，它包含了网页的实际内容，比如文本、图像和链接。在主体中，我们可以使用各种标签来创建网页的结构和样式。在HTML中，网页的内容被包含在``<html>``标签中。
HTML5爱心动画源码
12-18
背景为一颗绚丽的爱心动画，鼠标移动带轨迹小爱心，鼠标双击时再展示一颗爱心。
HTML5实现的3D爱心动画特效源码
09-23
这是一款利用HTML5和CSS3制作的3D爱心动画特效源码，取自国外网站。是一款值得收藏的HTML5 3D爱心动特效，特别适合作为七夕节或情人节的礼物，代码运行效果美观大方，有很强的立体感，是一款HTML5 3D特效的经典之作。
爱心代码和代码雨的结合，美爆了
kelezimeiti的博客
07-16 2649
左下角 阅读原文 直接保存并且下载源代码。
js 获取鼠标位置对应的节点_原生 JS 实现爱心跟随鼠标特效
weixin_39796839的博客
11-29 134
项目源码已上传码云：小朋友/JavaScript爱心跟随鼠标特效访问此URL可查看效果：http://is666a.gitee.io/javascript_love_follows_mouse/原生 JS 实现爱心跟随鼠标特效https://www.zhihu.com/video/1242924914882772992思路：别看这个花花绿绿的感觉很神奇，其实就一张heart图片，通过鼠标移动触发不...
鼠标跟随效果css,基于CSS3和jQuery实现跟随鼠标方位的Hover特效
weixin_42356460的博客
08-04 658
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候，遮罩层会从上次鼠标滑出的方向滑入，当鼠标滑出的时候，遮罩层会跟随鼠标，从鼠标滑出的方向滑出。这是一个十分有趣的效果。我们使用无序列表来组织缩略图和描述遮罩层：Natalie & Justin Cleaning by Justin Younger这些列表项将会向左浮动，并且相对定位...
JavaScript实现心形div块跟随鼠标移动(幻影效果)
qq_39155611的博客
06-03 678
JavaScript实现心形div块跟随鼠标移动(幻影效果) 上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动，然后有轩辕问我，想给女朋友做一个好看的可不可以。现在我们来实现一串心形的div实现跟随鼠标的效果。如图： HTML代码: <div class="box"></div> <div class="box"></div> <div class="box"></div> &
新手制作七夕3D爱心旋转相册教程
标签"七夕专属"表明这个3D相册和爱心计时功能可能被设计为一个特定节日的礼物，用于情感表达和分享。 7. 文件压缩和传输 文件被压缩成.zip格式，这是一种广泛使用的压缩文件格式，可以将多个文件和文件夹压缩成一个...
评论 78
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪碧有白泡泡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值