基于 JavaScript 实现的轻量级返回顶部浮动按钮

返回顶部

基于 JavaScript 实现的轻量级返回顶部浮动按钮

这是一款基于纯 JavaScript 及少量 CSS 实现的滚动到页面顶部浮动按钮,该按钮支持响应式,能够在移动等设备上完美显示,可实现让用户点击后顺利到达页面顶部,该插件可在页面底部创建带箭头...

带搜索建议、自动补全功能的搜索框 jQuery 插件

自动补全

带搜索建议、自动补全功能的搜索框 jQuery 插件

这是一款设计精良、支持多选项配置、轻量级的 jQuery 搜索框自动补全插件,这款插件使用起来非常简单,您只需定义一个您希望显示为搜索提示的建议字词数组,之后,插件就会在输入事件中动态地开始提示...

基于 JS 实现的支持伸缩的多层次折叠式导航菜单

多层次菜单

基于 JS 实现的支持伸缩的多层次折叠式导航菜单

本 HTML 代码片段可实现创建多级折叠式导航菜单,它能创建一个具有多级子菜单的可折叠菜单,基于 Bootstrap 图标和 CSS 来设计菜单样式,使用 JavaScript 实现点击效果,因...

7 种 使用 box-shadow实现的按钮悬停效果

悬停效果

7 种 使用 box-shadow实现的按钮悬停效果

本 HTML 和 CSS 代码片段是使用 box-shadow 属性创建的具有多种阴影悬停效果的按钮元素,当将鼠标悬停在按钮上或聚焦在按钮上时,您将体验到填充、脉动(扩散)、关闭、升高、向上填充...

基于 jQuery 实现可拖拽调整表格列宽的table表格

调整表格

基于 jQuery 实现可拖拽调整表格列宽的table表格

这是一款轻量级且易于使用的 jQuery 插件,可通过拖拽表头列调整任何 HTML 表格列的大小,使用起来也很简单,只需要将表格域调用制定的jQuery方法即可完成,表格的样式完全可以自定义。

纯 CSS 实现的带指示灯的平缓开关切换按钮

开关按钮

纯 CSS 实现的带指示灯的平缓开关切换按钮

基于纯 CSS 代码实现的平滑过渡的切换开关按钮。将复选框 checkbox 转换为漂亮的切换按钮,使用起来特别简单:只需将复选框 checkbox 放入指定的类名为「switch」的 div ...

9 款基于 CSS 实现的不同风格炫酷复选框

复选框

9 款基于 CSS 实现的不同风格炫酷复选框

基于 CSS 设计了 9 款炫酷的交互式复选框按钮或者单选框按钮,包含滑动方式、圆形按钮风格以及方形按钮风格三种时尚风格 3 种风格,可根据自身需求定制按钮的颜色、大小以及图标效果,使用起来也相...

适合 Bootstrap 5 框架的密码强度指示器

密码强度

适合 Bootstrap 5 框架的密码强度指示器

一款超级好用的基于 Bootstrap 5 实现的一个带有强度指示器的密码输入框,它可以直观地显示密码强度,代码根据密码的复杂度分别显示四个等级:弱、中等、强、超强,并使用不同的彩色杠杠显示强度...

CSS 磨砂玻璃形态按钮,悬停效果突出!

玻璃态按钮

CSS 磨砂玻璃形态按钮,悬停效果突出!

这是一款模仿磨砂玻璃的效果设计的按钮,静止状态像是有一块磨砂玻璃挡在灯光的前面,当您将鼠标悬停在这些按钮上时,后面的各种颜色的灯光会慢慢发光照射四方,并且前面的磨砂玻璃按钮在后面灯光动画的作用...

使用 HTML 和 CSS 制作带方向的箭头形按钮

方向箭头

使用 HTML 和 CSS 制作带方向的箭头形按钮

这段代码使用 HTML 和 CSS 创建了一个带方向的箭头形状的按钮,底层基于纯 CSS 为 "上一页 "和 "下一页 "导航的箭头形状按钮设计样式,可用作导航前一项以及后一项场景或者分页场景使...

使用材料设计的动画登录表单

登录表单

使用材料设计的动画登录表单

本代码基于 Material Design 风格创建一个包含动画效果的登录/注册表单,该表单设计了交互式输入元素,在切换时,表单会滑入或滑出,该脚本使用 jQuery 实现平滑过渡。切换按钮可激...

使用 CSS 创建的 Material Design 风格切换按钮

切换按钮

使用 CSS 创建的 Material Design 风格切换按钮

本代码片段使用 CSS 创建 Material Design 风格的切换按钮,底层实现使用了复选框和标签,按钮有三种不同的状态,分别是:未选中、选中和禁用,CSS 样式会根据这些状态应用不同的颜...