HTML on 阿珏酱のBlog https://zh.moejue.cn/tags/html/ Recent content from 阿珏酱のBlog Hugo zh-cn xxx@example.com (MoeJue) xxx@example.com (MoeJue) 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！ Sat, 13 Jun 2026 11:38:47 +0000 我用WebGL做18+游戏，输了“掉装备”🔞 https://zh.moejue.cn/posts/332/ Sat, 13 Jun 2026 11:38:47 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/332/ 我用WebGL做18+游戏，输了“掉装备”🔞

作者：MoeJue（xxx@example.com）

紧接上文：《同一个动画，我用三种技术栈实现的区别?》

WebGL 二次元石头剪刀布小游戏。

规则很普通：

  • 石头 > 剪刀
  • 剪刀 > 布
  • 布 > 石头

但有趣的是在于：

输了会脱衣服。

对,就是这么简单粗暴。

起因其实是“我想研究精灵图”

一开始我根本没想做游戏。
我只是想研究：

  • atlas
  • sprite
  • 图层叠加
  • 动画裁剪

这些东西。
然后想着：“总得有个实际应用场景吧？”

于是脑子一抽：

那干脆做个二次元脱衣猜拳。

然后项目开始朝奇怪方向狂奔。

这个项目最麻烦的其实不是游戏逻辑

石头剪刀布规则简单得离谱。
真正麻烦的是：衣服层级
因为角色不是：“一张完整图片”

而是：

  • 底图 (防粿体被抓包,特意加密了)
  • 衣服 A
  • 衣服 B
  • 衣服 C
  • 配饰
  • 遮挡层

不停叠。

“脱衣”其实是图层管理

玩家赢了：

  • 按设定好的顺序移除一件衣服

电脑赢了：

  • 再按逆序穿回来

听起来简单。
实际上会遇到一堆问题：

比如“不能瞬间露底图”

这个特别关键。
如果你：

先删旧衣服
再加新衣服

中间可能会闪出底图。
于是视觉效果会特别怪。
所以我后来用了：reveal 覆盖逻辑

新的层会立刻顶上。
尽量避免：

本文2026-06-13首发于阿珏酱のBlog，最后修改于2026-06-13

]]> 折腾代码 同一个动画，我用三种技术栈实现的区别? https://zh.moejue.cn/posts/328/ Fri, 29 May 2026 20:54:39 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/328/ 同一个动画，我用三种技术栈实现的区别?

作者：MoeJue（xxx@example.com）

最近我做了个挺有意思的小实验。
我把一个二次元角色的小动画效果，分别用：

  • WebGL
  • Canvas 2D
  • 纯 DOM + CSS

实现了三遍。
效果本身不复杂：

  • 眨眼
  • 眉毛/下眼皮联动
  • 流汗轻微飘动
  • 呆毛甩动

但真正有意思的，其实不是“做出来”。
而是：

同一个东西，用三种技术栈实现时，到底会差多少？

本质上就是一次“前端图形学味很浓”的复刻实验。

一开始只是想复刻一个呆毛动画

灵感来源：https://tamanidamani.itch.io/nijikas-ahoge
我当时想法特别简单：“如果是我,要怎么实现？”
然后越做越上头。最后直接演变成：

那我干脆把 WebGL、Canvas2D、DOM 三种方案都做一遍算了。

于是仓库就变成了现在这样：

三个版本同效果实现。

先说结论

如果只让我说一句话：

WebGL 最强，但 Canvas2D 最舒服，DOM 最适合业务

1. WebGL 版本：最像“真正游戏开发”

这个版本是最折腾的。
因为它本质上已经不是“前端动画”了, 而是：GPU 图形编程

它到底怎么实现的？

核心思路其实就是：

  • 底图一层
  • 精灵图一层层贴
  • shader 控制绘制
  • JS 驱动动画参数

比如：

  • 呆毛旋转
  • 眨眼裁剪
  • alpha 混合

这些其实都在 GPU 那边做。
你会开始接触：

  • uniform
  • texture
  • shader
  • UV
  • 顶点坐标
  • 纹理坐标

然后人会逐渐失去笑容。

本文2026-05-29首发于阿珏酱のBlog，最后修改于2026-05-29

]]> 折腾代码 论网速快慢的区别 https://zh.moejue.cn/posts/119/ Sat, 07 Nov 2020 14:09:07 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/119/ 论网速快慢的区别

作者：MoeJue（xxx@example.com）

论网速快慢的区别

随着网络的普及，用户对响应速度快慢越来越重视了，网站越快，用户的黏性和转化率也会越高。
简单来说，就是要提高速度！影响网站速度的因素有很多，比如………………….

一本正经可不是我的风格，下面请看我的表演
想法起源：

一开始的想法是使用纯css进行实现，把底图base64编码后直接放在background-image上，就可以达到背景图片于网页一同加载出来的效果

第一步：
首先将提前准备好的素材图片进行处理，拔下泳衣和泳裙

第二步：
新建个HTML文件

第三步：

完成。。
然后就发现个问题，由于我的底图文件大小达到了12兆，编码后的字符串过大，导致网页加载又卡又慢，实在无用户体验
而且这种方式加载的底图会突然的显示出来，过于唐突，效果不好

后改用：
css+JavaScript进行实现，由background-image直接加载背景图片，能达到逐渐显示的效果，待底图加载完毕后再由js动态插入配图

window.onload = function(){ var img=new Image(); img.src=‘裸体.jpg’; if(img.width==0){ alert(‘图片加载失败’) }else{ document.getElementById(“泳衣”).style.backgroundImage=“url(泳衣.png)”; document.getElementById(“泳裙”).style.backgroundImage=“url(泳裙.png)”; } }

不禁感慨一句，什么破网络，慢的连人物图片的衣服都加载不出来

本文2020-11-07首发于阿珏酱のBlog，最后修改于2025-08-15

]]> HTML 打造 macOS 风格的 Web 应用 https://zh.moejue.cn/posts/260/ Sun, 11 May 2025 11:46:03 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/260/ 打造 macOS 风格的 Web 应用

作者：MoeJue（xxx@example.com）

项目概述

在当今的 Web 开发领域，用户体验和界面设计变得越来越重要。

Mac Web Vue Template 这是一个受 macOS 设计启发的现代优雅的 Vue.js Web 模板, 是一个基于 Vue.js 的现代化 Web 应用模板，它的设计灵感来源于 macOS 的优雅界面。这个项目不仅提供了美观的 UI 设计，还包含了完整的项目结构和最佳实践。

在线演示

你可以通过访问 WebAi 来体验这个模板的实际效果。邀请码(MoeJue)

核心特性

  1. macOS 风格的 UI 设计

    • 采用 macOS 的设计语言
    • 精致的毛玻璃效果
    • 优雅的动画过渡

  2. 现代化的技术栈

    • Vue.js 作为核心框架
    • Vite 作为构建工具
    • Pinia 进行状态管理
    • Vue Router 处理路由
    • SCSS 预处理器
    • ES6+ 现代特性

  3. 响应式设计

    • 完美适配各种屏幕尺寸
    • 流畅的移动端体验

项目结构解析

项目采用了清晰且模块化的目录结构：

src/
├── assets/          # 静态资源
├── components/      # Vue 组件
│   ├── common/     # 通用组件
│   ├── system/     # 系统组件
│   └── apps/       # 应用组件
├── views/          # 页面视图
├── router/         # 路由配置
├── stores/         # 状态管理
└── utils/          # 工具函数

这种结构设计使得项目具有良好的可维护性和可扩展性。

本文2025-05-11首发于阿珏酱のBlog，最后修改于2025-05-11

]]> 折腾代码 我的二次元相册又回来了 https://zh.moejue.cn/posts/227/ Fri, 08 Nov 2024 09:52:39 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/227/ 我的二次元相册又回来了

作者：MoeJue（xxx@example.com）

从最早的图库,到图床,在到现在的相册.我对图片的执着已经可以说是跨越了好几个世纪了. 图库的图片是存在七牛云的,后来流量被刷就关闭了. 图床,现在转为为博客提供图片上传服务了. 相册,就是手机中相册的概念,它既可以存图片也可以放视频. 逐渐是越来越完善了

这两天就把平常保存的视频图片什么的上传到了服务器,写了个界面和接口,顺带开源出来.(我要做一个坚定的开源爱好者)

我的二次元相册前端界面

  1. 这里是阿珏酱的私人相册,保存着阿珏在平常收集的图片,和各大平台中点赞收藏的视频.
  2. 包括但不限于B站,YouTube,抖音,X,facebook,pixiv等平台的视频或图片,相关的数据信息版权归原作者所有.
  3. 数据将不定期手动更新,如果你想要某些图片或者视频,请直接联系阿珏酱获取.

预览

https://photo.moejue.cn

image image image

特性

  1. 支持图片和视频的展示
  2. 支持相册的展示
  3. 支持相册的密码保护
  4. 支持18+保护
  5. 支持搜索

Todo

  1. 优化特效展示
  2. 优化界面流畅度

安装说明

  1. 克隆仓库到本地：

    git clone https://github.com/iAJue/PhotoGallery.git

  2. 进入项目目录：

    cd PhotoGallery

  3. 安装依赖：

    npm install

  4. 打包项目

    npm run build

后端接口

仅供参考 https://github.com/iAJue/wasteCode/tree/main/photo

返回数据格式

  1. 照片接口

    [
{
    "date": "\u6628\u5929",
    "items": [
        {
            "src": "https:\/\/moejuevideo.pages.dev\/file\/1730957555106_ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp",
            "alt": "ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp",
            "isVideo": false,
            "duration": null
        }
    ]
}
]

  2. 相册接口

    本文2024-11-08首发于阿珏酱のBlog，最后修改于2024-12-04

    ]]> 二次元折腾代码 鸽主带着新版三合一回来了 https://zh.moejue.cn/posts/15/ Sun, 04 Aug 2019 01:42:18 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/15/ 鸽主带着新版三合一回来了

    作者：MoeJue（xxx@example.com）

    自从5.20表白后，鸽主就一直处于失踪状态…….

    时隔不知道多少个月，三合一它竟然又更新了，两个月前在群里立下的flag，今天我把它给圆了，不要问我中间两个月干嘛去了-.- （忙着参加大型鸽子聚会）

    正文

    由于网络识别经常挂掉，非常不稳定，一直有小伙伴在跟我反馈，所以这次特意更新了本地识别。
    推荐1G内存以上的机子安装，推荐配置2核2G，最优配置16核32G [#手动滑稽]

    v2.0

    • 新增本地二维码识别与生成
    • 移除网络识别接口
    • 修复已知BUG
    • 其它一些细节优化

    详细说明和安装教程可点击这里查看上个版本
    新版网站均保留了老版本数据，不影响之前用户使用，并且与赞助版数据同步

    赞助版

    由于老版本盗版泛滥，新版三合一增设了赞助版。
    演示网站：https://qr.moeins.cn

    赞助版主要特色：

    1. 优化二维码的识别与生成，大大提高识别准确率，更快的识别速度，不占CUP与内存，更稳定
    2. 新增21套三合一生成模板，并且可支持无限扩展，添加教程在文末
    3. 新增对外的API接口，不在针对该程序使用，任何程序都可调用

    如何获得：
    点击这里赞助项目18.88元以上即可获得收款码三合一的赞助专享版，你值得拥有！

    关于赞助版的一些小小说明（之前都是没有特意拿出来说明 ）
    到目前为止，我所有的赞助版项目均不绑定域名，不曾加密，可自由扩展，支持二开，且赞助金额都偏低，即可获得。所以还请有赞助的小伙伴们不要随意分享赞助得到的源码，这是对作者的尊重也是对自己权益的保障。由于不存在买卖关系，如无重大BUG作者将不定期更新或无限期拖更。如遇小问题，在作者空闲之余愿意指导或帮助修改，但是要新增大功能这种情况下我有权拒绝帮忙或需另外付费。

    赞助版模板扩展教程

    模板推荐尺寸为：900*1200

    1. 将模板图片放至/public/static/images/template/模板目录，注意请不要使用中文名，且只支持jpg后缀

    2. 在根目录的config.php中 qr_template 项下配置相关数据，格式如下：

      ‘001’ => [ ’name’ => ‘默认模板’, ‘data’ => [ 150,200 ], ’title’ => true, ‘size’ => 20 ]

    参数说明

    名称

    变量名

    必填

    类型

    示例值

    描述

    模板ID

    无

    是

    int

    001

    模板的文件名，推荐数字,不可重复

    别名

    name

    是

    string

    默认模板

    在前台显示的模板别名

    本文2019-08-04首发于阿珏酱のBlog，最后修改于2019-08-04

    ]]>     折腾代码     如何优雅的提交一个表单 https://zh.moejue.cn/posts/91/ Mon, 06 May 2019 07:28:33 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/91/ 如何优雅的提交一个表单

    作者：MoeJue（xxx@example.com）

    这是一个非常基础的HTML表单提交问题，但却是一个非常实用的技巧
    我的业务场景是这样的：
    一个可动态创建input的表单，如下图

    这意味着input的name不能是一个固定的，要不然肯定会被覆盖掉的

    第一种，传统的普通的提交方式，给每一个要提交的input一个唯一的name



    ......

    浏览器提交抓到的格式是这样子的

    服务器获取打印出来的是这样的，对后端的数据处理就非常不友好

    第二种，数组的方式进行表单提交



    ......

    浏览器和后端打印的分别为

    细心观察就回发现，提交的name值发生了变化，变成了一样的 ？数组？
    提交到后端就回发现数据比之前整齐多了
    但这里要注意的是，提交的数组键中不需要使用引号，要不然引号也会成为键的一部分

    当然了，实际中还可能遇到这样的问题，要提交的组数（像上面的1、2、3）是不确定的，可以在前端随意的添加，这个时候怎么去用数组提交这些内容呢？
    下面就是我业务中的实际解决方案
    这样的话，二维数组的键则不需要我们自己去维护了，由浏览器帮我们自动生成

    后端接收到的数据则变成了这样子，变得非常好处理了

    此方法适用于，要提交一堆不确定个数的一组有关的数据对
    完结撒花！~

    本文2019-05-06首发于阿珏酱のBlog，最后修改于2019-05-06

    ]]>     折腾代码     一些常见功能的查询sql https://zh.moejue.cn/posts/90/ Wed, 10 Apr 2019 09:33:11 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/90/ 一些常见功能的查询sql

    作者：MoeJue（xxx@example.com）

    1、场景：查询一个选手的排名及距离上一名差多少票
    方法二（去重排序查询比自己少的数量）

    $temp = DB::fetch_first(“SELECT distinct total+jewel_vote+forge_vote ,COUNT(*)+1 AS RANK FROM " . DB::table(‘vote_competition’) .” WHERE total+jewel_vote+forge_vote>" . $competition[‘all’] . " and aid={$aid} ORDER by forge_vote desc"); $rank = $temp[‘RANK’]; 无法直接查询到上一名选手票数 if ($temp[’total+jewel_vote+forge_vote’]) { //这里查询出来的是和第一名选手相差的票数 $up = $temp[’total+jewel_vote+forge_vote’]-$competition[‘all’]; }

    方法一（定义变量累加排序）

    $temp = DB::fetch_all(“SELECT a.cid,a.total,a.forge_vote,a.jewel_vote,(@rowNum:=@rowNum+1) AS rank FROM pre_vote_competition AS a, (SELECT (@rowNum :=0) ) b WHERE aid={$aid} ORDER BY (a.total+a.forge_vote+a.jewel_vote) DESC “); foreach ($temp as $key => $value) { if ($value[‘cid’] == $cid) { //当前自己的排名 $rank = $value[‘rank’]; if ($up) { $up = $up - ($value[’total’] + $value[‘forge_vote’] + $value[‘jewel_vote’]); } break; } //和上一名选手相差的票数 $up = $value[’total’] + $value[‘forge_vote’] + $value[‘jewel_vote’]; }

    本文2019-04-10首发于阿珏酱のBlog，最后修改于2019-04-10

    ]]>     折腾代码     萌音影视 - 在线影视应用 https://zh.moejue.cn/posts/75/ Tue, 25 Sep 2018 07:41:02 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/75/ 萌音影视 - 在线影视应用

    作者：MoeJue（xxx@example.com）

    Blog | 演示站 | QQ群 | GitHub

    基于优雅的 laravel 框架和一点都不妹子的 妹子UI 的在线影视应用

    作者有话要说

    虽然在线影视网上也是遍地都是，但这并不影响我自个写一个，这样以后自己看番也方便，毕竟自己动手才能丰衣足食，又能学习到新的知识，岂不美哉。

    页面设计参考了部分网站。影视资源均来自网上，如有侵权，请及时联系我们。

    让我们一起抛弃那些ex的60秒广告吧~

    • 无数据库、无后台模式，仅只有一个配置文件(config/web.php)
    • 无广告，支持vip解析，官方源，速度快，多频道，多分类

    To-do:

      • 独立的频道首页
      • 电视台直播
      • 多解析接口
      • 待添加…

    赞助专享版

    另外这是一个双版本应用，就是它会有两个不同的版本，赞助版基于普通版的优化而来，在功能和性能上做了很大提升，大大加快运行速度，并且保持优先的更新.

    • 那么，问题来了，如何获得赞助专享版呢？

    你可以在 这里 或者 这里 对项目赞助58元以上即可获得

    当然，如果项目对你有帮助，或者你有需要，都可以选择赞助我们，哪怕一分也是爱

    我想没有一个人写开源项目是为了牟利而写，毕竟它还没有去砖厂搬一天砖赚的多。

    安装需求

    • LNMP/AMP With PHP5.6+
    • curl、OpenSSL扩展
    • Composer

    通过Composer安装主程序

    1. 使用composer安装moeins 

    $ composer create-project a-jue/moeins 

    #等待安装依赖库后，会自动执行安装脚本
#出现如下提示表示安装完成

> Illuminate\Foundation\ComposerScripts::postInstall
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.
> php artisan key:generate
Application key [base64:Hx0I9UUQg7OyIz8lpDYG6Y/gW1uxS760ERdWvGG2jyQ=] set successfully.

    2. 目录权限

    将public 子目录设置为对外公开的web目录

    本文2018-09-25首发于阿珏酱のBlog，最后修改于2018-09-25

    ]]>     折腾代码     CSS3随机背景图片切换特效 https://zh.moejue.cn/posts/4/ Wed, 16 May 2018 11:58:08 +0000 xxx@example.com (MoeJue) https://zh.moejue.cn/posts/4/ CSS3随机背景图片切换特效

    作者：MoeJue（xxx@example.com）

    css3的随机背景图片淡入淡出切换特效 演示效果如本篇文章背景所示
    看大家扒我的幻想领域二次元限定版扒的比较累，扒了大半个小时的，抽空整理一下发出来
    设计之初本来是打算使用jQuery进行实现的，但是注意到了css3的@keyframes 规则，css3已经强大到曾经只有js才能实现的效果

    定义和用法

    通过 @keyframes 规则，您能够创建动画。

    创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

    在动画过程中，您能够多次改变这套 CSS 样式。

    以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

    0% 是动画的开始时间，100% 动画的结束时间。

    为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

    注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

    核心css部分(记得切换图片地址)

    body { background: #000; background-attachment: fixed; word-wrap: break-word; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-repeat: no-repeat }

    ul { list-style: none }

    .cb-slideshow li:nth-child(1) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099) }

    .cb-slideshow li:nth-child(2) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159) }

    .cb-slideshow li:nth-child(3) span { background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149) }

    本文2018-05-16首发于阿珏酱のBlog，最后修改于2018-05-16

    ]]>     css