可变字体
JavaScript 会呼吸的文字动画效果利用 JavaScript 结合 splitting.js 插件实现的文字收缩动画，其中 splitting.js 负责分词，JavaScript负责生成最终类似于呼吸的伸缩效果，该款效果应用于...
条件过滤
JavaScript 产品过滤界面，实现产品按照条件筛选与搜索查询基于 JavaScript 实现的按照指定分类筛选结果以及搜索框搜索结果，这里筛选以及全局搜索是基于 JavaScript 实现的，使用也多功能简单，只需要把图片放入数组中，并且定义好 cate...
呼叫中图标
SVG 带声波扩散效果的电话呼叫中图标代码实现的是一种电话呼叫中的动画效果，电话图标时SVG矢量图实现的，声波扩散的动画效果是基于 CSS 的 background、animation、box-shadow等一系列属性实现的，声浪效...
CSS过滤
CSS 的 has() 实现过滤数据，无需依赖脚本你在页面中过滤数据是否还需要依赖JavaScript等三方脚本？那你就彻底out了，其实只需要使用 CSS 的 has() 方法就可以轻松实现数据的过滤，而且使用起来也多功能简单，只需要把同一类...
光标放大
CSS JS 悬浮光标放大镜片效果代码实现的是一种鼠标悬停效果，具体表现为：当鼠标悬停与文字之上时，会出现类似于放大镜的圆形光标，透过圆形小镜子效果文字会变色，使用这种效果可以突出文字，提高主要内容的视觉吸引力，实现方式是通过 ...
网格图库
CSS 响应式轻量级网格布局图库，带预览功能这是一种网格布局的图片库效果，页面被分隔为两部分，左边部分为预览区，右半部分为图库区（图片以缩略图形式展示），当点击右侧图库图片时，图片与预览区原有图片交换位置，实现点击后放大预览的效果。其中网...
黏糊文字
CSS 黏糊文字横向滚动效果这是一种黏糊状的文字横向滚动动画效果，是基于 CSS 实现的，其中文字的黏糊效果实现尝试了几种方法后，最终采用了两层文本的方法：一层带有这种黏糊效果，另一层则是干净清晰的文本覆盖其上，这样可以确...
世界地图
Three.js 3D地球仪上的交互式 SVG 世界地图这是一种旋转的 3D 地球仪动画效果，能够全视角查看世界地图，并且支持拖拽和悬浮功能，当鼠标悬浮与地图之上时会显示该区域国家的名称，其中的 3D 效果是基于 Three.js 实现的，拖拽以及...
仿MAC系统
响应式 macOS 风格作品集展示页面使用 Swiper 插件实现的仿 MAC 系统个人作品集显示模板，可以通过类似于mac系统底部的Docker导航栏菜单切换栏目，该模板总共涵盖了四个模块，分别是个人介绍、个人技能及作品展示区、客...
手风琴动画
CSS 手风琴动画，适用于员工介绍或者团队介绍场景无JavaScript脚本依赖，仅用 CSS 实现的手风琴动画效果，默认状态下显示3列面板，每个面板可以防止图片以及文字介绍，当鼠标悬停于其中一个面板之上时，被悬停的面板呈现放大展开状态，并附带...
粒子动画
CSS 实现的 3D 球体旋转粒子动画使用 CSS 实现的 3D 粒子球体旋转动画，使用了 CSS 的 sin() 和 cos() 函数实现的，页面初始化时生成五串色彩缤纷的粒子，然后逐步绘制成粒子环绕的球体形状，并且粒子不停地...