
点阵图片
HTML中通过Canvas实现的点阵图像生成在线工具源码下载这是一款点阵图像生成效果,基于Canvas+CSS技术实现,将图像转换为点阵形式,提供了线性偏移量、径向偏移量以及对比度的配置选项,并且支持自定义上传图片,通过调整点的密度和大小模拟图像细节,...

短信验证
Tailwind CSS实现的 Toast 短信验证码OTP提示校验控件下载这是一款Toast 验证码提示效果,基于Tailwind CSS和JavaScript技术实现,通过Toast通知的形式实时反馈验证码的验证状态,简洁直观,适用于表单验证或用户交互场景。

待办事项
HTML中基于GSAP实现的待办事项增删选中等功能,任务项的变动附带平滑流畅的过渡效果这是一款待办事项列表动画效果,基于View Transitions API与GSAP技术实现,任务项的添加、删除或完成状态变化时,通过交错动画实现平滑过渡,并且支持响应式,可适配手机、平板及电脑...

鼠标箭头
JavaScript鼠标箭头替换为图片跟随鼠标移动基于JavaScript实现的鼠标箭头替换为任意图片效果,只需要简单十几行JS代码+10行左右的CSS即可实现鼠标箭头的替换,案例中使用的是gif图片,可以替换为任意格式任意类型图片资源。

提示框
纯CSS实现的轻量级高颜值工具提示(tooltip)插件这是一款简易的纯CSS工具提示(tooltip)效果,提供了圆角以及直角两种样式,不需要额外的伪元素。总共有上下左右四个开口方向的提示框设计。

3D全景看图
HTML中使用纯CSS构建的3D全景视界查看图片效果这是一款图片全景展示效果,完全基于CSS技术实现,通过使用视口单位进行3D转换,创建出沉浸式的图像浏览体验。由于采用了transform-style: preserve-3d属性,此效果可以在支...

虚拟钢琴
HTML实现可发声的CASIO SA-20虚拟键盘钢琴这是一款CASIO SA-20键盘钢琴的在线HTML复制品效果,主要基于HTML、CSS和JavaScript技术实现,特别使用了JavaScript的AudioContext API和振荡器(...

工具栏
react+CSS实现的悬浮工具栏插件,支持滑动选择操作!这是一款带有滑动选择效果的悬浮工具栏设计,有垂直以及水平排列两种布局方式,基于CSS+SVG+react技术实现。在这个设计中,当用户在工具栏中选择不同的工具时,指示器会平滑地滑动到所选工具的位...

打字测速
JavaScript实时打字测速在线小工具这是一款实时测量打字速度的速度计,基于JavaScript技术实现。它的工作原理类似于typetest.com等在线打字测试网站上的速度计,通过计算每分钟输入的单词数(WPM)来衡量用户的打字速...

惊喜礼品盒
CSS点击开启爆炸礼物动画 - 节日惊喜互动效果这是一款“爆炸礼物”的惊喜礼物盒互动动画效果,基于Three.js技术实现。当用户点击礼物图标、按Enter键或Spacebar键时,礼物的包装纸和丝带会瞬间爆炸成碎片,展现出礼物内部的内容。能...

温度计
动态温度计 - CSS绘制与JS控制的互动温度显示这是一款基于CSS绘制并由JavaScript控制的温度计效果。温度计的汞柱会随机上下移动,模拟温度的变化。当用户将鼠标悬停在汞柱上时,会显示当前的温度数值,为用户提供直观的温度变化感受。此效果...