纯CSS提示框生成器 - 鼠标悬停气泡代码
自定义箭头方向、颜色、大小和动画,生成无需JavaScript的纯CSS tooltip组件代码。
UD5工具箱
鼠标搓碟效果模拟 · Virtual Turntable Scratch Simulator
虚拟搓碟是通过鼠标或触摸屏模拟真实DJ在唱机上用手来回移动唱片产生的刮擦音效。这种技术利用音频的播放速率变化(playbackRate),在数字环境中复现经典的黑胶scratch效果,让没有实体设备的用户也能体验搓碟的乐趣。
点击播放按钮或直接点击唱片开始播放节拍循环,然后在唱片上按住鼠标左键并左右拖动即可产生scratch效果。向右拖动会加速播放(音高升高),向左拖动会减速甚至反向播放(产生经典的"哇音"效果)。拖动速度越快,scratch效果越强烈。
BPM(Beats Per Minute,每分钟节拍数)决定了音乐的速度。较低的BPM(60-80)适合慢节奏的Hip-Hop和R&B搓碟,中等BPM(90-110)适合经典Funk/Breaks风格,较高的BPM(120-140)适合电子舞曲和高速scratch技巧练习。您可以通过滑块在60-180 BPM之间自由调整。
Baby Scratch:最基本的来回移动,不利用crossfader,适合初学者感受唱片移动与声音变化的关系。Forward Scratch:向前推唱片时打开声音,拉回时关闭。Chirp Scratch:快速短促的来回移动,产生"啾啾"声。Transform Scratch:结合节奏切换的复杂技巧。本工具主要模拟前两种基础scratch。
真实打碟使用物理唱机和黑胶唱片,通过手指直接接触唱片控制速度和方向,触觉反馈非常直接。虚拟打碟通过鼠标或触摸屏操作,虽然缺少物理触感,但优势在于无需昂贵设备、随时随地可练习、支持精确的BPM调节,并且可以结合数字音频效果器进行更丰富的创作。
1. 从慢速BPM开始练习,建立手眼协调;2. 专注于节奏感,尝试跟随节拍进行scratch;3. 练习不同速度的来回移动,感受playbackRate变化对声音的影响;4. 尝试在节拍的不同位置(强拍、弱拍)进行scratch;5. 使用本工具反复练习,培养对唱片移动与音效变化的直觉。
本工具基于Web Audio API构建。核心原理是使用AudioContext创建循环播放的音频缓冲区(包含合成的鼓点节拍),通过实时改变BufferSourceNode的playbackRate参数来模拟scratch效果。鼠标在唱片上的移动速度被映射为playbackRate的变化量,正值加速播放,负值实现反向播放,从而产生真实的搓碟音效。唱片旋转动画通过requestAnimationFrame同步更新。
完全支持!本工具采用响应式设计,在手机和平板上同样可以体验。在移动端,您可以用手指在唱片上滑动来模拟搓碟效果,触摸交互与桌面端鼠标操作完全对应。唱片大小会根据屏幕尺寸自动调整,确保最佳操作体验。
自定义箭头方向、颜色、大小和动画,生成无需JavaScript的纯CSS tooltip组件代码。
模拟经典玩具,按方向键或虚拟旋钮绘制线条,按空格键晃动清除。
上传图标文件并设置背景色,模拟在 Android/iOS 主屏幕上的添加效果,检查视觉适配。
连接游戏手柄,触发不同时长和强度的振动效果,测试Vibration Actuator API。
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
请求Screen Wake Lock防止屏幕关闭,监听释放事件,适用于观看长内容等场景。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
设计振动时长与停顿数组,点击试振,复制代码在移动端触发自定义触感反馈。
配置滚动容器与目标元素,自定义随滚动触发的关键帧动画,输出纯CSS代码。
拖拉RGB三个滑块混合颜色,模拟硬件调色体验,显示16进制及色温感觉。
一款漂亮的拟物指针时钟,同时显示数字时间和日历,适合常驻副屏或全屏。
绑定动画进度到滚动位置,交互式调整参数,直观理解scroll-timeline和view-timeline。
可视化配置范围滑块的轨道、滑块、填充颜色,生成跨浏览器的CSS代码。
绘制或上传一个小图像,生成可用的.cur或内联SVG鼠标指针CSS代码。
创建带有复选框或标签的多选下拉列表,支持删除已选项,键盘可全控。
请求和释放屏幕唤醒锁,并监听释放事件,适用于视频播放或演示场景。
在线生成Lorem Ipsum占位文本,可指定段落数、单词数或字节数,用于设计排版和布局填充。
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案,确保视觉一致性。
制作像荧光笔划过的高亮背景或扫描下划线效果,导出类名。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
上传一组图片,设定每张展示秒数和转场,生成WebM视频幻灯。
设定最小、首选、最大三个尺寸及视口范围,生成响应式CSS clamp()表达式。
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
在可缩放网格上选区颜色绘制像素图,支持多帧预览简单动画。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
展示多种风格的<input type=range>样式,一键复制定制代码。
将屏幕变为纯白色或指定颜色,最高亮度辅助照明或信号。