拉伸文字
纯CSS实现文字横向拉伸效果这是一款仅使用CSS实现的拉伸文字效果。通过CSS的变形和布局属性,文字可以根据设定的比例进行拉伸或压缩,同时保持文本的可读性和美观性。这种效果适用于创建具有视觉冲击力的标题或强调特定内容,为页...
背景渐变光
jQuery+Tilt.js实现的背景光晕跟随鼠标渐变 - 卡片悬停倾斜效果这是一款卡片悬停倾斜效果,结合背景光晕跟随鼠标的渐变效果,基于jQuery+Tilt.js和CSS技术实现。当鼠标悬停在页面的卡片上时,卡片会朝向鼠标指针的方向倾斜,同时背景的渐变颜色也会随着...
鼠标箭头
JavaScript鼠标箭头替换为图片跟随鼠标移动基于JavaScript实现的鼠标箭头替换为任意图片效果,只需要简单十几行JS代码+10行左右的CSS即可实现鼠标箭头的替换,案例中使用的是gif图片,可以替换为任意格式任意类型图片资源。
找颜色
HSL色彩挑战小游戏 - 从众多相近色块中寻找不同的色块这是一款HSL色彩游戏,玩家需要从中找出具有不同色调或亮度的色块。游戏基于HSL色彩模型构建,通过调整色相(Hue)、饱和度(Saturation)和亮度(Lightness)来创建挑战,考验玩...
SVG模糊效果
SVG动态模糊光晕Blob动画背景效果,支持自定义光晕长宽尺寸这是一款模糊的SVG Blob动画效果,基于CSS和SVG技术实现。动画中的Blob形状从模糊状态逐渐清晰化,同时伴随着形态上的流动变换,创造出一种有机且动态的视觉体验。这种效果常用于背景或装饰...
模糊文字
GSAP实现随着鼠标上下滚动逐渐显示与模糊隐藏文字这是一款模糊文字渐显效果,基于gsap的ScrollTrigger技术实现。鼠标在页面向下滚动时文字会从模糊状态逐渐显现,当向上滚动时文字会逐个恢复为高斯模糊状态,吸引用户的注意力并引导视线到特...
动态阴影
基于 CSS UI 光线追踪技术实现的光照动态阴影效果这是一款基于CSS实现的动态阴影效果,通过UI光线追踪技术模拟实现。它能够根据设定的光源位置和强度,实时调整界面元素的阴影,创造出符合真实光照条件的视觉效果。此效果提升了用户界面的层次感和互动性...
模糊擦除效果
CSS+SVG 高斯模糊图片背景效果,GSAP实现追随鼠标局部擦除模糊效果这是一款高斯模糊背景图片效果,基于GSAP+CSS+SVG技术实现,鼠标在图片上移动交互过程中,除了焦点区域保持清晰外,周围的图片背景元素会呈现出不同程度的高斯模糊效果,使得用户注意力集中在鼠标...
水波纹效果
Three.js着色器打造的水波纹图像悬停特效这是一款图像悬停显示水波纹的效果,基于Three.js着色器技术实现,当用户将鼠标悬停在图像上时,图像会生成类似水面波动的动态波纹效果。这种特效通过Three.js库和自定义着色器代码来模拟真实...
悬停发光卡片
CSS与SVG打造的颗粒渐变卡片与悬停发光特效这是一款颗粒渐变卡片悬停效果,基于CSS+SVG技术实现,卡片元素采用带有质感的颗粒状渐变背景,当鼠标悬停时,卡片展现出精致的边框渐变(发光发亮)和动态交互效果,增强了视觉层次感与用户互动体验。
游戏按钮
CSS卡通泛光风格按钮,仿《堡垒之夜》游戏新主页按钮特效这是一款《堡垒之夜》风格按钮效果,基于HTML+CSS技术实现,这些按钮模仿了 Fortnite 游戏最新主页上的按钮样式与交互效果。按钮具有独特的视觉设计和吸引人的动态反馈,如色彩渐变、光影效...
凸起按钮
HTML与CSS打造的带明显按压效果的方框内嵌按钮这是一款内嵌按钮效果,基于HTML+CSS技术实现,当用户点击按钮时,按钮会呈现出仿佛被压入屏幕的视觉感受,通过巧妙运用阴影和边框的变化来模拟按下的动作,增强了界面的交互性和真实感。