JavaScript 眼球随着鼠标转动动画效果

眼球转动

JavaScript 眼球随着鼠标转动动画效果

基于 JavaScript 实现的眼球转动动画效果,当鼠标在页面移动时,眼球会随着鼠标的移动而转动,眼睛动画是 SVG 矢量图实现的,而随着鼠标转动的眼球动画则是基于 JS 实现的,通过捕捉鼠标...

CSS 手电筒闪光动画效果

频闪手电筒

CSS 手电筒闪光动画效果

CSS 实现的手电筒闪光动画效果,亮光会随着鼠标的移动变换位置,并在鼠标停留位置低频率闪烁,其中光亮随着鼠标的移动事件是由 JavaScript 的 addEventListener 实现的,手...

JavaScript 鼠标点击火花闪光效果

点击动画

JavaScript 鼠标点击火花闪光效果

基于 JavaScript 实现的鼠标点击特效,当鼠标点击页面时呈现火花四溅的动画效果,并且火花闪光的颜色可通过工具栏修改,该效果可以为网页的点击提供实时的视觉反馈效果,既有趣味性又能更好的提高...

JavaScript 亮暗主题切换立体旋转转场特效

切换转场

JavaScript 亮暗主题切换立体旋转转场特效

由 JavaScript 实现的亮暗主题切换转场特效,一般网站为了给客户带来更好的体验都会设置多种主题模式,比如常见的亮色模式和黑色模式,当两种模式进行切换时如果加入一些有趣的特效效果会更佳,今...

Canvas 细胞粒子运动动画

细胞运动

Canvas 细胞粒子运动动画

基于 p5 组件实现的 Canvas 细胞粒子无规则运动动画效果,实现原理是通过 JavaScript 调用 p5 插件的相关函数在 Canvas 画布上生成粒子运动的动画效果,类似于微生物、蝌...

gsap 滚动页面放大图片原理实现的「拨云见日」效果

滚动放大

gsap 滚动页面放大图片原理实现的「拨云见日」效果

这是一款基于 gsap 组件实现的滚动页面放大图片并最终进入另一张图片视野的效果,这种效果类似于拨云见日,与先前发布的这款「JavaScript 实现滚动鼠标放大图片,实现镜头拉近视野逐渐开阔...

GSAP 滚动鼠标切换图片效果

滚动切换图片

GSAP 滚动鼠标切换图片效果

基于 gsap 实现的鼠标滚动切换图片效果,该效果可用在图库预览场景中,通过上下滚动鼠标即可实现以平滑过渡的方式切换图片,该效果随着鼠标的滚动缓慢切换,当切换中途停止滚动时图片同样以切换一部分的...

SVG 黏糊糊的仿果冻按钮

仿果冻按钮

SVG 黏糊糊的仿果冻按钮

这是一款SVG按钮,通过 filter 属性实现了类似于果冻果肉那种黏糊糊弹性效果,通过 CSS 的 filter 属性控制按钮的流动效果,而且还实现了按钮颜色的渐变过渡效果,交互性特别强的一款...

SVG 复选框选中后跳跃星星⭐️动画效果

星星跳跃

SVG 复选框选中后跳跃星星⭐️动画效果

复选框操作 SVG 星星变换形态动画,当复选框被选中时,空心的星星会跳跃翻转并且内部填充黑色,变为黑色小星星,当取消复选框选中状态时,填充的黑色消失重新恢复为空心的星星状态,动画效果是 CSS ...

JavaScript 实现的 Canvas 猩猩扔香蕉大战小游戏

扔香蕉小游戏

JavaScript 实现的 Canvas 猩猩扔香蕉大战小游戏

这是一款由 JavaScript 实现的 Canvas 动画小游戏,这款游戏的可玩性非常高,游戏的主题是:两只大猩猩互相扔香蕉,谁先被砸中谁就输,扔香蕉的操作需要通过拖拽鼠标进行操作,力度的大小...

Three.js 粗线条绘制的旋转 3D 球体和 3D 正方体

3D旋转物体

Three.js 粗线条绘制的旋转 3D 球体和 3D 正方体

​代码片段创建了两种动画,分别是多条粗线组成的 3D 旋转球体动画效果,以及多条粗线组成的 3D 立方体动画效果,3D效果是利用 Three.js 插件创建的,最终的动画效果会被绘制在 Canv...

CSS 结合 gsap 实现可拖拽拉长或缩短的 Dock 导航栏

Dock菜单栏

CSS 结合 gsap 实现可拖拽拉长或缩短的 Dock 导航栏

使用 CSS 结合 gsap 插件创建的可拖动拉长或缩短的 Docker 导航栏,该Docker导航栏默认是水平放置的,可通过自定义选项设置为垂直显示Docker导航栏效果。这种仿 Docker...