CSS+JS实现神秘感十足的挥舞魔法棒揭露图片真面目动画效果

魔法照片显示

CSS+JS实现神秘感十足的挥舞魔法棒揭露图片真面目动画效果

一款通过魔法棒挥舞来显示与隐藏照片的效果,基于CSS+JS技术实现,通过实时监测魔法棒「鼠标」的位置对图片进行隐藏与显示,创造出一种神秘而吸引人的交互体验。

JavaScript鼠标箭头替换为图片跟随鼠标移动

鼠标箭头

JavaScript鼠标箭头替换为图片跟随鼠标移动

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

CSS+SVG 高斯模糊图片背景效果,GSAP实现追随鼠标局部擦除模糊效果

模糊擦除效果

CSS+SVG 高斯模糊图片背景效果,GSAP实现追随鼠标局部擦除模糊效果

这是一款高斯模糊背景图片效果,基于GSAP+CSS+SVG技术实现,鼠标在图片上移动交互过程中,除了焦点区域保持清晰外,周围的图片背景元素会呈现出不同程度的高斯模糊效果,使得用户注意力集中在鼠标...

Three.js Shader驱动的图像悬停互动效果,悬停后图片产生彩色块状像素效果,并追随鼠标运动

悬停着色

Three.js Shader驱动的图像悬停互动效果,悬停后图片产生彩色块状像素效果,并追随鼠标运动

这是一款图像悬停效果,基于Three.js+Shader技术实现,当鼠标悬停在3D场景中的图像上时,图像会通过着色器产生动态的视觉变化,如变形、颜色转换或光效流动等,增强用户交互体验。

CSS实现的7款不同风格斜角卡片边框效果|多边形卡片

多彩边框

CSS实现的7款不同风格斜角卡片边框效果|多边形卡片

这是一款斜角卡片边框效果,基于纯CSS技术实现,通过巧妙运用clip-path创建具有真实(半)透明边框的斜角形状。利用Sass mixin计算多边形点以形成独特的卡片轮廓,并且在需要时同样使用...

HTML横向竖条状响应式布局相册,悬浮图片放大点击后展示图文详情

块状相册

HTML横向竖条状响应式布局相册,悬浮图片放大点击后展示图文详情

这是一款相册展示布局效果,基于CSS+JS技术实现。图片默认设置为暗灰色并且被划分为竖条状紧密的横向排列在HTML页面中,支持响应式布局,在手机登小型设备上会以纵向排列横条装的布局显示。当鼠标悬...

使用CSS background属性打造的4款酷炫图片边框

图片边框

使用CSS background属性打造的4款酷炫图片边框

这是一款为HTML中图片<img>元素添加酷炫边框的效果,基于CSS技术实现。通过巧妙运用background属性,可以在图片周围创造出独特且吸引人的边框样式,而不需要额外的HTML标记或复杂的...

超简单CSS实现图片悬停边框不变,图片内容缓慢放大动画效果

图片放大

超简单CSS实现图片悬停边框不变,图片内容缓慢放大动画效果

这是一款图片悬停放大效果,仅需要20多行CSS代码即可实现,非常的简单。当用户将鼠标悬停在图片上时,图片会平滑地放大,创造出吸引人的视觉焦点。此效果不依赖各类外部库,仅通过简单的代码就能实现。

CSS实现图像切片附带悬停3D凸起波浪效果,并实现了色差滤镜

波浪图片效果

CSS实现图像切片附带悬停3D凸起波浪效果,并实现了色差滤镜

这是一款纯CSS 3D余弦波悬停效果,基于CSS数学函数与3D变换技术实现。该效果摒弃了对单个元素使用z-index的传统做法,而是将常见元素置于同一个3D渲染上下文中,并为每个元素分配了一个索...

基于SVG实现的三种单色滤镜图像效果,支持调整颜色改变图片滤镜效果

SVG滤镜

基于SVG实现的三种单色滤镜图像效果,支持调整颜色改变图片滤镜效果

​这是一款单色化效果,基于SVG滤镜+CSS技术实现,使用单一的<img>元素并通过三种不同的SVG滤镜来达成各异的单色视觉效果。每个滤镜都为图像提供了独特的单色调处理方式。此外,还提供了配置颜...

HTML中基于CSS实现3D海报展示及左右滚动切换效果,带指示滑块和镜面反射效果

3D切换

HTML中基于CSS实现3D海报展示及左右滚动切换效果,带指示滑块和镜面反射效果

这是一款惊艳的3D图片滚动轮播效果,通过上下滑动鼠标即可实现带有镜面反射效果的立体图片左右来回切换的功能。基于CSS3技术实现,通过使用transform-style: preserve-3d来...

CSS+SVG实现的图片悬停切割分裂动画效果

切割效果

CSS+SVG实现的图片悬停切割分裂动画效果

这是一款图像切片悬停效果,基于CSS+SVG+HTML技术实现,通过单一img元素展示每个切片结果,并应用简洁的CSS规则来减少样式代码量。用户可以通过调整Sass中的$n变量轻松自定义切片数量...