登录界面
HTML复古游戏风格登录表单通过Vue.js实现的复古经典游戏风格登录表单，点击登录按钮加载中状态会出现「吃豆人」的游戏元素动画效果，非常有趣其有创意的一款登录界面，可以将经典的视频游戏元素与现代前端框架结合起来。这样的登...
摇摆节拍
HTML实现的带摇摆动画效果的节拍器使用CSS以及JavaScript实现的带有「嘀嗒」声音和摇摆视觉节拍的简单在线节拍器。 支持设置 BPM 速度调整节拍数以及支持播放和暂停功能。其中仿「不倒翁」的摇摆效果是通过GSAP实现的。
拖拽工具条
JavaScript实现的轻量级拖动条，调整相邻板块区域大小通过纯JavaScript创建了一个简单的拖动条（dragbar）来调整两个相邻HTML板块区域的大小，只需要简单十几行JS代码即可实现，无需依赖各类三方插件，特别的轻量级。
旋转立方体
CSS波浪彩色3D旋转立方体，多种颜色平滑交替过度效果通过CSS的keyframes、transform以及animation等关键属性实现的3D旋转立方体，立方体周边泛着晶莹剔透五彩缤纷的色彩变化，你可以根据自己的需求调整颜色、大小、动画速度和其...
交替布局
CSS实现图片与内容位置交替的响应式布局以及反向布局利用CSS的布局属性创建了一个交替布局的页面，其中每个文章区块内的图像和内容会根据区块的方向属性交替排列，同时确保在响应式布局中内容始终位于图像之上。并且支持反向布局选项。这种布局底层使用CSS...
波浪方格
CSS实现多彩方格波浪效果创建了一个“色彩网格波浪”（Color Wave）效果，可以使用CSS动画来模拟多种颜色的方格在元素之间起伏流动的效果。这种效果通常用于网站的背景或其他需要视觉吸引力的元素上。通过使用CSS的a...
加载环
通过SVG和CSS实现的多彩圆环加载中Loading动画效果CSS通过keyframes实现的6种颜色圆环转圈加载中Loading动画效果，其中圆环是通过svg矢量图绘制的。非常简约的一款HTML加载器，不足百行代码便可实现。使用起来也很简单只需要将cl...
切纸片
CSS实现手起刀落动画效果通过CSS的clip-path创建一个“斩切”（Chop）效果，可以使用CSS动画来模拟刀剑切割的动作。这个动画将涉及一个刀剑图形和一个被切割的对象，这两个对象是通过CSS的clip-path等...
海滩明月
CSS动画模拟夜晚一轮明月高高挂起的海滩景观动画效果基于CSS实现的海滩波浪与月明星稀的静谧背景动画效果，一轮明月周围点点繁星高挂，下方是波动的海浪，这个简单的CSS景观设计展示了如何使用CSS来创建一个美丽而宁静的夜间海滩场景。你可以根据自己的...
运动轨迹
CSS 基于 cubic-bezier 实现加速减速运动曲线基于CSS的三次贝塞尔函数cubic-bezier（）以及animation和keyframes实现的加速减速不断变换位置的曲线动画效果。增加了变换背景色以及图形数量的设置按钮。
小球绕环
CSS 三只小球环绕圆环顺时针运动Loading页面加载器动画效果创建一个由环形（ring）和球体（spheres）组成的动画场景，并使用CSS来控制z-index的变化，可以产生一个动态且具有深度感的三只小球环绕圆环顺时针运动动画效果。这样的动画可以用于各...
创意时钟
HTML中通过SVG实现Apple Watch简洁风格的时钟动画创建了一个受Apple Watch时间启发的时钟主题SVG动画效果，时分秒分别对应着三个颜色不一样且从小到大依次嵌套的圆环，中心是数字时间，钟表的圆环轮廓是通过SVG矢量图实现的，细节样式是通...