悬浮效果
基于 CSS 的 clip-path 实现图片悬浮变换形状效果使用 CSS 的 clip-path 属性来创建鼠标悬停（hover）效果。clip-path 属性允许你定义一个形状，只有在这个形状内的部分才会被显示出来，而其他部分则会被裁剪掉。当用户将鼠标...
动画菜单图标
CSS带创意翻越动画效果的菜单切换图标，这是一个「灵活」的菜单切换图标！基于CSS的keyframes、transform以及animation等关键属性实现的「身手灵巧」的菜单切换图标动画效果，这个切换图标相当了不起，当你点击图标进行展开或者隐藏菜单操作时，图标的...
网格布局
CSS实现响应式网格菜单布局通过CSS实现的响应式菜单网格布局，无论是手机、平板还是电脑设备都能良好展示。在页面的左上方设置了一个典型的三条杠菜单图标按钮，点击该按钮会呈现出全页面的菜单网格布局，这时候左上角的菜单按钮变为...
固定侧边栏
使用CSS及JS实现可增减商品的购物车粘性侧边栏布局在html5中使用CSS及JS实现的支持动态增减块级元素内容的固定侧边栏组件，并且支持一键清空内容，非常适用于购物车添加商品或者产品比对功能场景中。底层使用CSS的position: stick...
日期选择器
Bootstrap Datepicker日期选择器应用案例，并使用 jquery.dateFormat 格式化日期使用 Bootstrap Datepicker 日期选择器实现的应用案例，并且结合 jquery.dateFormat 格式化显示日期。支持语言、开始时间以及时间格式等多种自定义选项配置。
标记文本
HTML网页中实现高亮显示滚动到视图中的文本。利用 Intersection Observer API 以及 GSAP ScrollTrigger 两种技术实现了高亮显示滚动到视图中的文本效果。这两种技术可以通过实时监测屏幕中的某些“元素”...
光束
HTML 密码输入框聚光灯投射效果，实现密码隐藏与显示切换功能这是一款特别有创意且实用的控制密码输入框显示、隐藏切换的动画效果，利用CSS结合JavaScript技术实现的光束显示密码效果，并且光束会随着鼠标微微移动。当点击密码输入框右侧的眼睛小图标时会显...
文字动画
CSS创建「活泼」文字3，实现文字躲藏、撤退、破碎、摇晃、闪烁、翻滚动画效果基于CSS的animation、transform以及keyframes等关键属性实现的6种文字增强动画效果，此外，还利用splitting插件进行了分词操作，最终实现了文字躲藏、文字撤退、文字...
文字动画
CSS创建「活泼」文字2，实现文字鬼影、喊叫、慢跑、瑟瑟发抖、褪色、摇晃动画效果基于CSS的animation、transform以及keyframes等关键属性实现的6种文字增强动画效果，此外，还利用splitting插件进行了分词操作，最终实现了文字鬼影、文字喊叫、文字...
文字效果
CSS创建「活泼」文字1，实现文字跳动、浮动、慢跑、上下旋转、左右旋转、下降动画效果基于CSS的animation、transform以及keyframes等关键属性实现的6种文字增强动画效果，此外，还利用splitting插件进行了分词操作，最终实现了文字跳动、文字浮动、文字...
滚动视差
CSS实现的一种视觉吸引力超强的滚动视差效果使用 position: sticky 和 scale 变换来创建一个带有视差效果的CSS粘性（sticky）区域，当用户滚动页面时，下层图片会以较慢的速度进行滚动，而上层的内容部分会以相对较快...
轮播插件
React 实现带鼠标追随效果的轻量级轮播切换组件，完全响应式布局！使用 React 构建的轻量级轮播与幻灯片插件，外观特别的时尚大方简约，其中的鼠标追随效果是通过设置当前幻灯片的 x 和 y 坐标的CSS值，以便在鼠标移动时创建跟踪鼠标的动态过渡效果。切换等交...