加载效果
CSS实现的 Neumorphism（新拟物风格）加载指示器动画效果基于CSS创建了一个 Neumorphic 风格的加载动画，结合锥形渐变（conic-gradient）和 CSS 的其他重要变量，可以实现一个既美观又现代的效果。Neumorphic 风格强调...
滚雪球
CSS雪地上滚动雪球效果范围指示器一款通过CSS结合TypeScript技术实现的雪球滚动范围指示器，整体效果表现：背景是雪地，雪球在雪地中横向滚动形成凹痕路线，雪球的上方是范围刻度数字（写在雪地上的文字效果），并且雪球带有影...
同心圆加载器
CSS+SVG实现的三层同心圆开合动画Loading加载中特效这是一款通过CSS以及SVG技术实现的三层同心圆逐渐闭合以及张开动画效果的预加载器，其中包含了三层不同长度并围绕圆周移动的同心圆线条。当加载完成时，这些线条会再次环绕整个圆形区域。实现细节：首...
流程指示
CSS响应式步骤指示器，支持前后切换步骤通过CSS与JS技术在HTML文件中实现的一种轻量级响应式的步骤指示器，在小屏幕状态下会自动切换为纵轴指示器已适配屏幕大小从而实现响应式效果。步骤之间通过直线进行连接，当切换前后步骤时会有连线...
昼夜交替
HTML利用太阳和月亮作为滑块的曲线时间选择器，灵感来源于自然界的昼夜交替！基于CSS结合JavaScript技术在HTML中实现了一个独特的使用太阳和月亮作为手柄滑块的曲线时间选择器。这个设计灵感来源于自然界中的昼夜交替，用户可以通过拖动太阳和月亮手柄来选择一天中的...
滚动指示
CSS创意闹钟效果鼠标滚动指示器小组件该代码片段创建了一个由鼠标滚动驱动的小闹钟动画计时器，其中小闹钟图标是通过SVG矢量图创建的，底层完全使用CSS实现滚动计数和指针滑动效果。小闹钟下方的进度百分比会根据滚动位置更新，闹钟的指针以...
带进度轮播
gsap 超实用炫酷的圆点进度指示器效果一款通过gsap.js实现的滚动轮播效果带圆点进度指示器的插件，左侧的圆点与右侧的内容一一对应，随着滚动鼠标内容切换的同时圆点进度指示器也会跟着移动，并且当鼠标悬浮在圆点上时圆点会变为右侧对应...
轮播特性
Swiper 动感十足的百叶窗轮播图动画效果这是一款使用Swiper + Particles + 少许CSS 创建的百叶窗轮播效果插件，下方带有圆点轮播进度指示器，能够通过指示器直观地观察图片切换的进度，可通过点击图片或者滚动鼠标两种方式...
滚动轮播
CSS 实现鼠标滚动内容平滑切换动画效果纯 CSS 实现的滚动鼠标切换内容效果，页面中可放置多个section块元素，每个块元素中可随意定义文字、图片以及视频等内容，当滚动鼠标时每个section块元素会作为一个整体进行平滑的切换，同...
图库
支持触摸与键盘控制预览的响应式图像灯箱 jQuery 插件这是一款跨平台、跨浏览器的 jQuery 触摸响应式图像灯箱效果插件，支持图片、视频和其他各类内嵌内容的滑动预览操作，主要特色功能包括：1、支持触摸，支持轻扫（左、右、上、下）滑动图片/视频/内...
开关按钮
纯 CSS 实现的带指示灯的平缓开关切换按钮基于纯 CSS 代码实现的平滑过渡的切换开关按钮。将复选框 checkbox 转换为漂亮的切换按钮，使用起来特别简单：只需将复选框 checkbox 放入指定的类名为「switch」的 div ...
密码强度
适合 Bootstrap 5 框架的密码强度指示器一款多功能好用的基于 Bootstrap 5 实现的一个带有强度指示器的密码输入框，它可以直观地显示密码强度，代码根据密码的复杂度分别显示四个等级：弱、中等、强、超强，并使用不同的彩色杠杠显示强...