一个基于 Web 的图片压缩工具,允许用户指定目标文件大小,并自动调整图片质量和尺寸以达到最佳压缩效果。该工具拥有炫酷的霓虹科技感界面,提供流畅的用户体验。
- 目标大小压缩: 用户可以设定图片压缩后的目标文件大小(KB)。
- 智能质量调整: 工具会自动寻找最佳的图片质量和尺寸组合,以满足目标大小要求。
- 实时预览: 上传图片后,可在界面上预览图片。
- 霓虹科技感界面:
- 动态粒子背景: 炫酷的霓虹粒子动画作为背景,营造未来感。
- 鼠标跟随光晕: 鼠标移动时伴随柔和的紫色光晕效果。
- 科技感按钮: 按钮设计独特,带有发光效果和交互动画。
- 渐变文本: 标题和描述文字采用霓虹渐变色,增强视觉冲击力。
- 自定义鼠标样式: 独特的科技感鼠标指针。
- 下载: 将
index.html
文件下载到您的本地计算机。 - 打开: 使用任何现代浏览器(如 Chrome, Firefox, Edge)直接打开
index.html
文件。 - 选择图片: 点击“选择图片”按钮,上传您想要压缩的图片。
- 设定目标大小: 在输入框中输入您希望图片压缩到的目标大小(单位:KB)。
- 压缩并导出: 点击“压缩并导出”按钮,工具将自动处理并下载压缩后的图片。
- HTML5: 页面结构。
- CSS3: 负责所有炫酷的视觉效果,包括:
linear-gradient
和@keyframes
实现动态背景。box-shadow
和filter: blur()
实现光晕和霓虹效果。background-clip: text
和-webkit-text-fill-color
实现渐变文本。- 自定义
cursor
样式。
- JavaScript:
- 图片压缩逻辑(Canvas API)。
- 鼠标跟随光晕效果。
- 背景粒子动画。
您可以轻松修改 index.html
文件中的 <style>
标签内的 CSS 代码,以及 <script>
标签内的 JavaScript 代码,来调整界面的颜色、动画速度或任何其他视觉元素。
欢迎任何形式的贡献!如果您有改进建议或发现 Bug,请随时提交 Issue 或 Pull Request。
本项目采用 MIT 许可证。详情请查看文件头部。