水平滚动
HTML实现水平方向滚动卡片效果，超过屏幕的卡片自动隐藏横向排列多张内容卡片超过屏幕的卡片自动隐藏，使用GSAP结合ScrollTrigger插件实现水平滚动卡片效果，可以让每一行的卡片在用户滚动页面时以流畅过渡动画形式展现出来。当用户浏览到这一部分...
文字悬停动画
基于GSAP和自定义JavaScript包装函数实现的8种创意的文字悬浮动画效果使用GSAP（GreenSock Animation Platform）和自定义的JavaScript字母包装函数实现的文字悬停动画，可以实现当鼠标悬停或者离开文字时，该字符会有独特的动画效果...
动态表情
利用 Parallax.js 插件实现Emoji表情动态效果，让Emoji表情随着鼠标轨迹运动这个效果利用了Parallax.js库实现了Emoji表情眨眼效果同时也实现了Emoji表情眼睛随着鼠标轨迹移动。随着鼠标摇头晃脑的Emoji表情很可爱也极具交互性！
穿梭小火箭
CSS支持加速以及变换方向的小火箭穿越星空动画效果纯CSS实现的小火箭穿越星空动画效果，主要是通过CSS的animation、transform以及transition实现的，支持鼠标控制火箭飞行方向，点击页面火箭会进入加速状态。
区域裁剪
使用CSS clip-path 实现滚动渐显的英雄区块，增强网站滚动体验！使用CSS的clip-path属性创建出的一种动态效果，使得页面上的元素（例如首页英雄区域）在页面滚动时逐渐显示出来。页面最开始的时候，英雄区域被一个形状（通常是矩形）完全覆盖，用户看不到其内容...
折叠纸
CSS折叠纸效果登录表单，鼠标经过时纸张会平铺展开！基于CSS的transform以及transition等关键属性实现的「折叠纸张效果的登录表单」，当鼠标经过时纸张会呈现平铺打开的动画效果。这是一种创意的设计概念，它模拟了真实世界中的纸张折叠效...
固定效果
GSAP实现滚动页面固定特定区域效果这是一种使用 GSAP 的 ScrollTrigger 插件实现的一种叫做“固定区域（Pinned Section）”的滚动动画效果，这种效果表现为当用户滚动页面到某个特定区域时，示例中的特定...
文字滚动
实现 HTML 页面四个边框文字滚动效果，滚动的文字源于视口中的段落标题！基于 CSS 实现的页面四周文字滚动播放效果，其中滚动的文字来源于当前页面视口的标题文字，而获取视口标题文字的方式是通过 GSAP 的 ScrollTrigger 插件。
倾斜面板
CSS实现响应式面板倾斜排列布局，附带悬停面板扩大效果使用 CSS 中的 Flexbox 布局结合变形（skew）变换实现了倾斜面板排列效果。默认是横向的排列布局，针对较小屏幕的设备，布局会自动调整为纵向布局，具有将强的自适应能力，并且在鼠标悬停时...
悬浮效果
基于 CSS 的 clip-path 实现图片悬浮变换形状效果使用 CSS 的 clip-path 属性来创建鼠标悬停（hover）效果。clip-path 属性允许你定义一个形状，只有在这个形状内的部分才会被显示出来，而其他部分则会被裁剪掉。当用户将鼠标...
动画菜单图标
CSS带创意翻越动画效果的菜单切换图标，这是一个「灵活」的菜单切换图标！基于CSS的keyframes、transform以及animation等关键属性实现的「身手灵巧」的菜单切换图标动画效果，这个切换图标相当了不起，当你点击图标进行展开或者隐藏菜单操作时，图标的...
网格布局
CSS实现响应式网格菜单布局通过CSS实现的响应式菜单网格布局，无论是手机、平板还是电脑设备都能良好展示。在页面的左上方设置了一个典型的三条杠菜单图标按钮，点击该按钮会呈现出全页面的菜单网格布局，这时候左上角的菜单按钮变为...