- 博客(259)
- 收藏
- 关注
RSS订阅原创 实测！Three.js 实现动态粒子螺旋与星环环绕动画
摘要：该页面采用极简HTML框架，通过Three.js实现全屏3D粒子效果。核心包括动态粒子球体、发光着色器和交互式相机控制，粒子会随时间和位置产生韵律波动。CSS仅用于全屏画布定位，所有视觉效果均由JavaScript和WebGL渲染完成，创造出具有呼吸感的沉浸式空间体验。 （字数：149字）
2025-06-11 17:10:16
367
原创 HTML&CSS：产品卡片动画效果
本文展示了一个动效精美的产品卡片HTML代码。卡片采用白色背景，带有圆角边框和阴影效果，包含产品图片、分类标签、标题、描述、价格和购买按钮。主要特点包括：悬停时图片放大、按钮渐变背景和光效动画、价格对比显示等。CSS使用了渐变背景、过渡动画和阴影效果，整体设计简洁现代。代码可直接复制使用，若遇格式问题可私信获取完整源码。
2025-06-10 15:52:44
608
原创 HTML&CSS：3D图片切换效果
这个3D画廊展示页面采用了Three.js库实现3D渲染效果，主要特点包括： 核心功能：圆形画布展示3D图像，用户点击缩略图即可切换显示内容 视觉设计： 采用圆形画布+双重边框设计 边框应用渐变颜色效果 缩略图使用卡片式框架设计 技术实现： 使用Three.js处理3D渲染和动画 响应式交互设计（悬停效果+激活状态） 预加载多张展示图片 亮点： 流畅的3D动画过渡效果 精致的UI细节（阴影、边框等） 现代化视觉效果 页面整体设计简洁但视觉效果突出，适合展示艺术作品或产品图片。
2025-06-09 14:32:56
778
原创 HTML&CSS：超好看的数据卡片
这个页面实现了一个温度监测仪表盘，包含两个卡片分别显示室温和环境温度。每个卡片都有独特的颜色主题和动画效果，页面使用了 CSS 渐变和阴影来增强视觉效果。
2025-06-06 15:56:43
1081
原创 全网最全的ES6总结：让JavaScript代码量锐减，效率飙升！
ES6 核心特性摘要：ES6（ECMAScript 2015）为 JavaScript 开发带来多项革新特性，显著提升代码简洁性和开发效率。主要包括：1）箭头函数简化代码并解决this指向问题；2）解构赋值优雅提取数据；3）模板字符串支持多行文本和变量嵌入；4）let/const提供块级作用域；5）Promise和async/await改善异步编程；6）模块化支持import/export；7）类语法糖实现面向对象编程；8）Set/Map等新数据结构；9）对象属性简写；10）可选链操作符和安全访问机制。这些
2025-06-04 17:15:54
447
原创 HTML&CSS：前端黑科技—用 Canvas 模拟量子波动
这篇文章介绍了一个使用 HTML5 的 canvas 元素和 JavaScript 实现动态波函数图像的前端代码示例。通过 HTML 和 CSS 设置页面布局和样式，JavaScript 代码负责绘制波函数的实部和概率密度，并利用 requestAnimationFrame 实现动态效果。文章还提供了代码的详细解释，包括如何初始化画布、绘制波函数以及实现动态更新。最后，作者鼓励读者关注、点赞和分享，以支持更多类似的内容。
2025-05-23 13:56:31
988
原创 HTML&CSS：会眨眼的 AI 机器人
这个 HTML 文件通过 CSS 动画和伪元素实现了一个简单的机器人头像动画效果。机器人头像包括眨眼、嘴巴动和头部左右晃动的动画。HTML 结构主要由 ai-bot 容器、head（头部）、face（面部）、eyes（眼睛）和 mouth（嘴巴）组成。CSS 部分通过 :root 定义全局颜色变量，并使用 @keyframes 创建了眨眼、嘴巴动作和头部晃动的动画效果。代码展示了如何通过纯 CSS 实现动态效果，适合用于简单的网页装饰或学习 CSS 动画的示例。
2025-05-23 13:36:48
1098
原创 HTML&CSS：前端 3D 黑科技：云层交互与天气展示
这个 HTML 文件展示了一个结合 3D 动画和天气信息的网页，主要使用 Three.js 实现 3D 云层效果，并通过 Tailwind CSS 完成响应式布局和视觉设计。网页背景采用渐变色，并添加了动态光影效果，增强了视觉体验。天气小部件通过 CSS 动画实现了浮动、淡入、缩放等效果，提升了交互性。用户可以通过点击云层查看天气信息，云层和天气图标均带有动态效果，如浮动、旋转等。此外，网页还支持响应式布局，确保在不同设备上都能良好展示。代码中提供了详细的 CSS 动画和样式定义，方便开发者理解和修改。
2025-05-21 14:12:59
716
原创 第16课：JavaScript性能优化——让代码飞起来
本文介绍了优化网页性能的三大关键技术：防抖节流、虚拟滚动和内存管理。首先，防抖和节流技术可以有效减少重复操作，提升响应速度。其次，虚拟滚动通过只渲染可视区域的数据，大幅减少DOM操作，适用于处理海量数据列表。最后，内存管理部分强调了及时清理定时器、事件监听器和DOM引用，避免内存泄漏。通过这些技术，开发者可以显著提升网页的流畅性和稳定性，确保用户体验丝滑如德芙。
2025-05-20 14:35:41
616
原创 第15课：设计模式——代码的“武林秘籍”
本文介绍了编程中的三大设计模式：单例模式、观察者模式和工厂模式，并通过实战案例展示了如何应用这些模式来提升代码的复用性和可维护性。单例模式确保一个类只有一个实例，适用于全局状态管理等场景；观察者模式通过一对多的依赖关系实现对象间的自动通知，常用于事件系统和实时数据推送；工厂模式封装对象创建过程，适用于UI组件库和复杂对象创建。最后，文章通过一个全局消息通知系统的实战案例，展示了如何结合这些设计模式来解决实际问题。
2025-05-09 10:56:12
337
原创 第14课：小白进阶必看！面向对象编程——用“乐高思维”组装代码
/ 方法（自动挂载到原型）speak() {${this} // 方法（自动挂载到原型） speak() {console . log(` ${ this . name } 发出声音 `);} } const animal = new Animal('小狗');// 小狗发出声音发出声音`);const animal = new Animal('小狗');// 小狗发出声音。
2025-05-09 10:51:46
1102
原创 第13课：小白进阶必看！AJAX与Fetch入门
传统网页：点链接 → 整页刷新（像去店里取餐）AJAX 网页：JS 悄悄发请求 → 局部更新（像外卖小哥送餐到桌）
2025-05-09 10:50:53
125
原创 第12课：小白进阶必看！客户端数据存储—让浏览器记住你的小秘密
青春因奋斗而闪光，梦想因拼搏而绽放！你是否遇到过这样的尴尬：用户填了一半的表单，不小心刷新页面，所有内容都没了？别担心！今天我们就来学习如何让浏览器拥有“记忆”，即使用户关闭页面，数据也不会丢失！最后带大家做一个 「离线也能用的待办清单」，Let’s go！特点： 关掉浏览器数据还在，除非手动删除用法：存对象（需用 JSON 转换）：2. sessionStorage：临时储物柜**特点：**仅当前标签页有效，关闭就消失用法（和 localStorage 一样）：3. Cookie：会自动打包的小纸
2025-05-08 10:56:06
845
原创 第11课：小白进阶必看！JavaScript 模块化与工程化—从脚本到项目
当你面对数千行代码混杂的 HTML、全局变量冲突、手动刷新页面的开发方式时，是否渴望拥有的能力？本节课将带你完成从“草台班子”到“正规军”的蜕变，用 Webpack+Babel 武装项目，最后将天气工具工程化部署！
2025-05-08 10:55:04
909
原创 第 10 课：小白进阶必看！JavaScript 从回调地狱到 Async/Await 的异步编程革命
努力到无能为力，拼搏到感动自己！当你面对层层嵌套的回调、无法定位的异步错误时，是否想过： 为什么处理异步这么痛苦？本节课将带你穿越时空，经历 JS 异步编程的进化史，最后用 Async/Await 开发「天气查询工具」，体验丝滑的异步代码！痛点：优势：优势：状态： pending → fulfilled/rejected（不可逆）链式原理： .then 返回新 Promise，可连续调用3. 并发控制三、Async/Await 实战技巧1. 错误处理标准化2. 并行请求优化3. 突破循
2025-05-07 15:27:56
638
原创 第9课：小白进阶必看！ES6+JavaScript新特性全攻略
2015 年发布的 ES6 是 JavaScript 历史上，它让 JS 蜕变为“工程化语言”。但很多时候面对 () => {}、…等符号仍会懵圈。本课将用解析必学特性，让你读懂并写出优雅的现代 JS 代码！
2025-05-07 15:26:22
847
原创 第8课：JavaScript实战-简易计算器——入门阶段成果验收
恭喜来到「JavaScript 魔法学院」入门阶段最后一课！经过前 7 课的学习，你已掌握 JS 核心基础，今天我们将用 100 多行代码 开发功能完整的计算器，包含加减乘除、连续计算、异常处理能力，最终效果可直接加入个人作品集！
2025-04-25 09:01:17
454
原创 第7课：JavaScript事件处理——JS的“感官系统”
不要害怕前方的黑暗，因为你每走一步，光明就会更靠近你一分。勇敢地迈出今天这一步，用努力点亮未来的路，你比想象中更强大！欢迎来到「JavaScript 魔法学院」第 7 课！如果说网页是人体，那么事件就是 JS 的“感官”——它能感知用户的点击、输入、滑动等行为，让网页“活”过来！今天我们将解密事件机制，并开发「图片画廊」交互特效，代码可直接嵌入个人网站！三要素：监听谁：DOM 元素（按钮、输入框等）听什么：事件类型（click、input 等）做什么：回调函数（事件触发时执行的代码）每个事件处理函数
2025-04-25 09:00:06
402
原创 第6课：DOM操作进阶——网页的“变形术”
给每个按钮绑定点击事件 → 性能差给父元素绑定事件，通过 e.target 识别子元素 → 节省内存。
2025-04-24 10:52:49
961
原创 第5课：对象与类——JS的“信息收纳盒”
欢迎来到「JavaScript 魔法学院」第 5 课！前几课我们学会了用变量存储零散数据，但如果要管理（姓名+年龄+爱好），该怎么做呢？今天的主角就是为这种场景而生！最后带大家用对象开发，Let’s go!
2025-04-24 10:51:55
295
原创 第4课：函数基础——JS的“魔法咒语”
① 函数声明（经典咒语）// 定义咒语console.log(`🔥 火球攻击${// 定义咒语 function fireBall(target) {console . log(` 🔥 火球攻击 ${ target }！`);} // 调用咒语-可多次调用 fireBall("哥布林");// 🔥 火球攻击 哥布林！fireBall("小笨蛋");// 🔥 火球攻击 小笨蛋！！`);// 调用咒语-可多次调用fireBall("哥布林");// 🔥 火球攻击 哥布林！
2025-04-23 14:39:47
1016
原创 第3课：运算符与流程控制——JS的“决策者”
欢迎来到「JavaScript 魔法学院」第 3 课！今天我们将化身代码世界的“指挥官”，用计算数据，用做出决策！文末实战带你用，绝对震撼！
2025-04-23 13:44:59
356
原创 HTML&CSS：全网最全的代码时钟效果
这个页面实现了一个展示多种设计风格时钟的博物馆，每个时钟都有独特的视觉效果。页面使用了 CSS 和 JavaScript 来实现时钟的动态效果和交互功能。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构h1：显示页面标题“Museum of Clocks”。container：包含多个时钟展示卡片。每个卡片如 skeuomorphic、flat-design、material-design
2025-04-22 12:48:07
375
原创 HTML&CSS：看这里，动态背景卡片效果
这个页面实现了一个具有动态背景效果的卡片布局，每个卡片都有独特的背景颜色和光效。页面使用了 CSS 自定义属性和动画来增强视觉效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构两个 card 元素，每个都代表一个卡片。card__backdrop：定义卡片的背景效果。card__content：包含卡片的内容，如标题、段落等。CSS 样式bod
2025-04-22 12:47:36
850
原创 第2课：变量与数据类型——JS的“记忆盒子”
不经历风雨，怎么见彩虹？无人能随随便便成功，努力吧，你一定会成为那个闪闪发光的人！:::欢迎来到「JavaScript 魔法学院」第 2 课！上节课我们让网页“动”了起来，今天要学习 JS 的——用“记忆盒子”（变量）存储数据，并掌握数据的“分类标签”（类型）。，等你来挑战！
2025-04-22 12:46:43
495
原创 第1课：初识JavaScript——让你的网页“动”起来！
JavaScript：1995 年由 Brendan Eich 用 10 天设计，现已成为全球使用最广的编程语言。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript：网页的“魔法师”，负责让静态页面动起来（比如弹窗、轮播图）。JavaScript：直接运行在浏览器，无需安装环境、支持事件响应（点击、滑动等）、能与 HTML/CSS 无缝协作。
2025-04-22 12:46:07
625
原创 HTML&CSS：超有趣的登录表单
这个页面实现了一个具有 3D 效果和动画的登录表单，包含多个输入框和一个提交按钮。页面使用了 Flexbox 布局和 CSS 动画来增强视觉效果和用户体验。输入框和按钮具有良好的视觉效果和交互体验，包括悬停和聚焦效果。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-04-11 10:59:29
873
原创 HTML&CSS：卡片式提交框
这个页面实现了一个简单的订阅表单，包含一个输入框和一个提交按钮。页面使用了Flexbox布局和绝对定位来实现居中显示和装饰效果。输入框和按钮具有良好的视觉效果和交互体验，包括焦点状态和悬停效果。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-04-11 10:58:58
557
原创 HTML&CSS：领导说这个开关能打99.99分
这个页面实现了一个具有宇宙风格的3D复选框切换开关，通过CSS动画和3D效果创建了一个现代化的交互界面。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构cosmic-toggle：定义了一个自定义样式的复选框容器。toggle：定义了一个复选框，使用CSS隐藏了默认样式。slider：定义了复选框的滑块部分，包含以下子元素：cosmos：定义了宇宙背景效果。energy-line：定义
2025-04-10 13:41:46
1098
原创 HTML&CSS：这个复选框打几分？
这个页面实现了一个具有霓虹灯效果的复选框，通过CSS动画和过渡效果创建了一个现代化的交互界面。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构neon-checkbox：定义了一个自定义样式的复选框容器。checkbox：定义了一个复选框，使用CSS隐藏了默认样式。neon-checkbox__frame：定义了复选框的框架部分，包含以下子元素：neon-checkbox__box：定义
2025-04-10 13:41:19
1066
原创 HTML&CSS：有个性的复选框
这个页面实现了一个自定义样式的复选框，通过CSS动画和3D效果创建了一个现代化的交互界面。复选框在选中和未选中时显示不同的文本（Yeah!和Nope），并具有良好的视觉效果和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-04-09 17:28:04
744
原创 HTML&CSS：音乐播放器卡片
这个页面通过 CSS 动画和 Flexbox 布局，创建了一个现代化的音乐播放器界面，具有良好的视觉效果和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构main：是整个页面的主容器，内部包含了一个当前播放的歌曲信息和多个加载动画。currentplaying：显示当前正在播放的歌曲信息，包括一个 SVG 图标和文本。loader：每个元素都包含歌曲名称、艺术家名称、专辑封面
2025-04-09 17:27:29
913
原创 HTML&CSS：3D加载动画的实现
这个页面实现了一个带有两组不同颜色和渐变效果的加载动画。每组动画包含四个加载器，每个加载器都有一个旋转动画和光点效果。页面使用了CSS动画和渐变背景来增强视觉效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构loader-container：包含一组加载动画。loader loader1：定义了一个加载动画，包含一个span元素。loader load
2025-04-08 10:41:45
920
原创 HTML&CSS：用Three.js创造3D书本世界
这个页面实现了一个带有3D动画效果的网页，用户可以看到一个3D场景中的书本随机放置并旋转。页面使用了Three.js库和GSAP库来实现3D效果和动画，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构canvas-container：用于放置Three.js渲染的3D内容。overlay-text：包含覆盖在3D内容上的文本。script：包含页面的Jav
2025-04-08 10:41:13
1035
原创 HTML&CSS：纯CSS实现小游戏动画效果
这个页面实现了一个动画精灵的显示和控制功能，用户可以通过按钮选择不同的动画状态，并通过下拉选择框调整动画的帧率。页面使用了CSS变量和伪类选择器来动态控制动画效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构body：定义了页面的主体内容。container：包含整个页面的内容。sprite-wrapper：包含一个动画精灵sprite的容器。spr
2025-04-08 10:40:45
892
原创 HTML&CSS：哇塞！Three.js 打造的 3D 交互平面，鼠标滑动纹理如梦幻般变形！
这个页面实现了一个基于Three.js的3D交互效果，用户可以通过鼠标移动在平面上产生动态的纹理变形和阴影效果。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构body：定义了页面的主体内容。script：包含JavaScript代码，用于实现3D场景的渲染和交互功能。CSS 样式html, body：设置页面的外边距和内边距为0。禁止页面内容溢出，确保全屏显示。JavaScri
2025-04-07 11:43:03
959
原创 HTML&CSS：超好看的收缩展开菜单
这个页面实现了一个具有动画效果的菜单选择框，用户可以通过点击按钮选择不同的菜单选项。页面使用了SVG图标和CSS动画来增强视觉效果，整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构potion-select potion-select：定义了一个选择框，用于选择不同的图标选项。potion-equipped：定义了一个按钮，显示当前选中的药水。select
2025-04-07 11:42:32
929
原创 HTML&CSS：不一样的开关效果
这个页面实现了一个具有复杂背景效果和立体按钮的简单布局。页面使用了多个径向渐变和线性渐变来创建视觉上丰富的背景效果，同时按钮也通过阴影和渐变效果增强了立体感。页面的整体设计风格现代且具有视觉吸引力。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
2025-04-03 13:53:46
890
原创 HTML&CSS：你绝对没见过的input输入框，确定不看看吗
这个页面实现了一个带有动画效果的输入框组件，用户可以在输入框中输入内容，并通过清除按钮清除内容。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。HTML 结构body：定义了页面的主体内容。url-input：定义了一个输入框组件，包含图标、输入框和清除按钮。icon：包含一个 SVG 图标和一个用于显示网站图标（favicon）的 div。text：包含一个输入框（input），用户可以输入 URL
2025-04-03 13:40:58
1268
空空如也
想做一个分享前端内容的公众号，没有浏览量怎么搞？
2024-10-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人