加载按钮
CSS按钮的「提交、加载、完成」完整流程动画效果这种按钮加载动画效果是通过使用CSS中的:checked伪类来模拟进度和完成状态，当复选框（checkbox）被选中时，:checked状态会被激活，从而触发预定义的CSS样式变化，这些变化包括...
水果复选框
CSS橙子与蓝莓切换实现复选框切换效果通过纯CSS实现的通过单击切换蓝莓与橙子水果来实现开关切换或者复选框效果，实现方式其实是在checkbox复选框的基础上进行扩展实现的，CSS通过监测checked事件变换不同的水果形状。
Emoji聊天
HTML中实现有趣的Emoji表情问答界面通过CSS与JS实现了一个简约交互性强的Emoji表情问答聊天界面，通过输入框提交问题，Emoji表情会给你答案，与你愉快的聊天。其中表情会根据不同的聊天语境作出不一样的动画效果。并且整体的聊...
雨中窗户
CSS实现窗外下雨打雷闪电动画效果，CSS实现的逼真窗户使用CSS来模拟窗外下雨的场景，可以为你的网页增添一种宁静而富有氛围的视觉效果。整个动画包含窗外的下雨动画、窗帘、窗户、空调外机、书架以及绿植这些静物，这些摆放的物体以及下雨动画效果都是通过纯C...
GIF融入文字
基于CSS的mix-blend-mode实现文字与gif无缝融合效果这是一个使用重叠的动画GIF和CSS的mix-blend-mode等关键属性实现的“Tiger Uppercut（街头霸王）在文字中穿梭”的动画效果，是一个非常有趣且视觉效果丰富的文字效果。
弹跳效果
基于CSS实现的此起彼伏的弹跳动画效果创建了一个“此起彼伏的弹跳”动画效果，使用CSS的动画来让主要颜色（红色、蓝色、黄色）的条形色块在页面上弹跳，并且每一个色块顶部都有一个不同的emoji表情，表情会随着色块的跳动而飞跃。可以为你...
阴影效果
CSS炫酷的聚光灯下长阴影3D效果基于CSS的transform、transition以及linear-gradient等关键属性实现的一个鼠标悬停文本呈现聚光灯照射文本效果，并且使其投射出3D立体长阴影。这种效果可以为文本添加...
介绍卡片
HTML创意个人简介卡片布局，附带交互性极强的折叠与打开详情功能通过JS结合CSS实现的个人信息展示卡片布局效果，初始状态下是一张手绘简图（可以根据性别放置不同的图片），简图的眼神会随着鼠标的方向进行移动。当点击简图后会呈现「折叠纸甩开摇摆」的动画效果，在简...
出场动画
GSAP英雄标题文字出场输出动画效果创建一个使用GSAP和Lettering.js技术实现的滑出文字介绍效果，是一个非常有趣且视觉效果丰富的文字亮相动画效果。其中Lettering.js负责拆解文字逐个进行输出，以便更精细地控制每...
夜空背景
CSS繁星点点夜空背景效果，美丽的夜空星星随机闪动创建一个“Starry Night「繁星夜空」”的背景效果，使用Sass的random()函数来生成随机的星星位置和大小，可以实现一个动态且自然的夜空效果。
拳击汉堡
基于Zdog和GSAP技术实现「汉堡拳击手」3D动画效果结合Zdog和GSAP库创建了一个有趣的立体汉堡打拳击动画效果，小汉堡的拳击动作非常的娴熟，支持通过鼠标360度拖拽查看细节并且点击后小汉堡会打出一套漂亮的拳击动作！其中Zdog基于SVG创建3...
数字轮播
通过CSS的:nth-child选择器实现的数字内容轮播效果创建了一种数字序列（0123456789）轮播效果，使用CSS的:nth-child选择器来为每个数字添加不同的样式，实现了有趣丝滑的轮播切换效果。其中，数字的颜色、数字下的横杠外观以及底部内容...