2. Linux.do
  3. 开源一个高颜值壁纸站：干净无广告，支持 4K 下载，已上线！

开源一个高颜值壁纸站：干净无广告，支持 4K 下载，已上线！

暖心 2025-12-26 17:12 1

^-^ v2.10 更新！新增头像自制工具 + 新拟态卡片效果



^-^ v2.10.0 版本发布：头像自制工具上线 + 壁纸卡片 3D 浮雕效果



大家好！距离上次更新又过了几天，这次带来 Wallpaper Gallery 的 v2.10 版本更新！


这次主要新增了头像自制工具，让你可以自己裁剪制作个性化头像，同时壁纸卡片也加入了新拟态（Neumorphism）3D 效果。


一句话总结：更实用、更立体、更有质感。



^-^ 快速体验




  • 在线访问：https://wallpaper.061129.xyz




  • GitHub：GitHub - IT-NuanxinPro/wallpaper-gallery: 基于 Vue 3 + Vite 7 的高清壁纸展示网站。支持 4K 预览下载、GSAP 动画、响应式设计、暗黑主题。 ^-^





^-^ v2.10 更新亮点


^-^ 全新头像自制工具（PC 端专属）


这次最大的新功能！可以自己动手制作个性化头像了。


核心功能：



  • 多种图片导入方式：支持本地上传 + 在线链接导入

  • 智能裁剪系统：基于 Cropper.js 的专业裁剪工具

    • 自由拖拽调整裁剪区域

    • 缩放、旋转、翻转等操作

    • 实时预览裁剪效果



  • 灵活的输出选项：

    • 圆形/方形头像切换

    • 自定义圆角大小（0-50%）

    • 自定义输出尺寸（100px-1000px）



  • iPhone 真机预览：提前看到头像在手机上的显示效果

  • 高质量输出：PNG 格式，保证清晰度




^-^ 壁纸卡片新拟态（Neumorphism）效果


给壁纸卡片加入了流行的新拟态设计，带来 3D 浮雕质感！


设计细节：



  • 双向阴影系统：左上高光 + 右下投影，创造立体浮雕效果

  • 交互动画：Hover 时阴影反转，模拟按下效果

  • 移动端优化：更柔和的阴影参数，适配小屏幕

  • 主题一致性：保持紫蓝渐变配色，增强视觉层次感



^-^ v2.0 核心功能回顾


以下是 v2.0 版本的核心功能（已上线）：


^-^ 弹窗系统（全平台重构）


PC 端和移动端弹窗完全分离，针对不同设备深度优化。


^-^ 移动端壁纸弹窗（全新设计）




  • 高级感渐变背景：深邃的紫蓝渐变 + 玻璃拟态卡片




  • 沉浸式预览：图片区域最大化，信息区精简不抢戏




  • 丝滑过渡动画：打开/关闭都有流畅的缩放淡入效果




  • 无布局跳动：图片加载时不再撑开弹窗，体验更稳定





� 移动端头像弹窗（专属设计）




  • 圆形头像框：紫蓝渐变边框 + 光晕效果




  • 紧凑布局：专为正方形头像优化，不浪费空间




  • 统一视觉语言：与壁纸弹窗风格一致





�️ PC 端弹窗优化




  • 桌面壁纸弹窗：更大的预览区域，信息展示更完整




  • PC 头像弹窗：简洁的 iPhone 框架展示





^-^ 真机预览模式（iPhone 14 Pro）


移动端壁纸新增真机显示模式，让你提前看到壁纸上机效果！




  • iPhone 14 Pro 真实框架：1:1 还原手机外观




  • 灵动岛动画：开启时有呼吸灯效果




  • 实时时钟显示：模拟锁屏界面




  • 物理按键细节：音量键、静音键、电源键都有




  • 沉浸式体验：点击屏幕显隐控制按钮






^-^ 紫蓝渐变配色方案


告别单调，拥抱紫蓝渐变！




  • 主色调：#667eea → #764ba2（优雅的紫蓝渐变）




  • 按钮统一：下载按钮、真机预览按钮都采用渐变设计




  • 选中态优化：日期选择器、分类选择器的选中效果更醒目




  • 深色模式适配：渐变色在深色背景下更加惊艳





^-^ 性能优化


移动端滚动优化




  • 移除 backdrop-filter：彻底解决 iOS 滚动卡顿问题




  • 滚动性能提升 50%+：长列表滑动如丝般顺滑




内存泄漏修复




  • 定时器清理：所有组件的定时器都正确销毁




  • 图片资源释放：裁剪弹窗关闭后及时释放内存




  • 长时间使用更稳定：不再越用越卡




滚动穿透彻底解决




  • 新增 useScrollLock：专门的滚动锁定方案




  • 弹窗打开时：背景页面完全锁定，不会跟着滚




  • 弹窗关闭后：精确恢复到原来的滚动位置





^-^ 统计系统升级




  • Supabase 实时统计：浏览量、下载量实时更新




  • 本地缓存支持：离线场景也能正常显示





^-^ 来几张截图感受下


PC 端效果




移动端效果




^-^ 技术栈




  • 前端：Vue 3.5 + Vite 7 + GSAP




  • UI 组件：Element Plus + Vant（移动端）




  • 样式：SCSS + CSS 变量 + 深色模式




  • 统计：Supabase 实时数据库




  • 部署：Github Pages





^-^ 支持项目


如果这个小站帮到你：




  • ^-^ 直接使用：https://wallpaper.061129.xyz




  • ^-^ GitHub Star：GitHub - IT-NuanxinPro/wallpaper-gallery: 基于 Vue 3 + Vite 7 的高清壁纸展示网站。支持 4K 预览下载、GSAP 动画、响应式设计、暗黑主题。




  • ^-^ 提建议：欢迎 Issue / PR





^-^ 所有图片来自公开渠道整理，仅供个人欣赏，版权归原作者所有。




^-^ 更新日志


v2.10.0（本次更新）^-^


新增功能



  • ^-^ 新增头像自制工具（PC 端专属）

    • 支持本地上传 + 在线链接导入

    • 智能裁剪与实时预览（Cropper.js）

    • 圆形/方形头像切换，支持自定义圆角

    • 自定义输出尺寸（100px-1000px）

    • iPhone 真机预览效果

    • 高质量 PNG 格式输出




视觉优化



  • ^-^ 壁纸卡片新增新拟态（Neumorphism）3D 效果

    • 双向阴影系统（左上高光 + 右下投影）

    • Hover 时反转阴影，模拟按下效果

    • 移动端优化：更柔和的阴影适配小屏幕




Bug 修复



  • ^-^ 修复移动端筛选弹窗确认按钮被截断问题

  • ^-^ 优化 Bing 数据同步逻辑


v2.0.9



  • ^-^ 修复 README 格式

  • ^-^ 优化 Bing 数据同步流程和安全配置


v2.0.0


弹窗系统全平台重构



  • ^-^ 新增 MobileModal：移动端壁纸弹窗（高级感渐变设计）

  • ^-^ 新增 AvatarMobileModal：移动端头像弹窗（圆形框架）

  • ^-^ 新增 DesktopModal：PC 端壁纸弹窗

  • ^-^ 新增 DeviceMode：真机预览模式（iPhone 14 Pro + 灵动岛）


性能与稳定性



  • ^-^ 移动端移除 backdrop-filter，滚动性能大幅提升

  • ^-^ 修复多个组件定时器内存泄漏

  • ^-^ 修复弹窗图片加载时布局跳动问题

  • ^-^ 新增 useScrollLock，彻底解决滚动穿透


视觉升级



  • ^-^ 统一紫蓝渐变配色（#667eea → #764ba2）

  • ^-^ 优化 BingDatePicker 选中态样式

  • ^-^ 优化 AppHeader 移动端性能



^-^ 下一步计划



  • 更多壁纸源接入（Unsplash、Pexels）

  • 头像自制工具移动端适配

  • 更多新拟态效果应用到其他组件


欢迎在 GitHub Issues 提出你的想法！



感谢阅读，v2.10 带来了实用的头像工具和更有质感的视觉效果，希望你会喜欢 ^-^


再次附上链接：




  • ^-^ https://wallpaper.061129.xyz




  • ^-^ GitHub - IT-NuanxinPro/wallpaper-gallery: 基于 Vue 3 + Vite 7 的高清壁纸展示网站。支持 4K 预览下载、GSAP 动画、响应式设计、暗黑主题。



最新回复 (19)
  • 国家电网 12-26 17:12
    1楼

    感谢佬的分享。

  • doomer 12-26 17:14
    2楼

    感谢分享，都是美女啊

  • lau 12-26 17:15
    3楼

    感谢分享

  • HappyZing 12-26 17:16
    4楼

    支持支持，网站做的挺好看的

  • 橙汁好吃 12-26 17:18
    5楼

    给佬友Star一下

  • Soupotato 12-26 17:18
    6楼

    感谢分享

  • WYF2 12-26 17:18
    7楼

    支持支持

  • 海贝鱼 12-26 17:19
    8楼

    感谢佬的分享

  • 小馒头 12-26 17:19
    9楼

    mark 了

  • Sakura7 12-26 17:19
    10楼

    前排点赞

  • 黉门客 12-26 17:22
    11楼

    厉害厉害，太强了 ^-^

  • 坠入星河 12-26 17:22
    12楼

    打开好慢

  • pins 12-26 17:23
    13楼

    图片看着有点眼熟，在这个站也有，有印象是因为我下了几张作壁纸用


    欢迎大家来用。会持续更新的。相应的功能会慢慢开发。如果想通过随机api接口去爬壁纸的话会被封禁调用这个接口的，注意了。
    [image]
  • SH_Youth 12-26 17:24
    14楼

    这些都是 AI 画的吗 ^-^

  • Norman Mises 12-26 17:26
    16楼

    多来点美女的壁纸，不要AI！

    我都是扒抖音博主的横屏壁纸

  • Cat_QAQ 12-26 17:26
    17楼

    或许会用到，插个眼，顺带谢谢佬的分享

  • 飞天小白 12-26 17:27
    18楼

    接入bing吧。。这样每天都可以更新

  • LMQICU 12-26 17:28
    19楼

    点赞点赞 ^-^

  • OnceAgain 12-26 17:28
    20楼

    感谢分享

* 帖子来源Linux.do
附近帖子
返回
飞读
随机推荐