日食动画
Lume 网页端模拟日食全过程动画效果在html网页端通过Lume实现的日食变化全过程动画效果，实现起来特别简单，只需要在html网页中引入Lume插件，进行简单的设置即可实现，该效果可用在日常教学或者自己学习中。
插头开关
SVG 开关插头接电动画效果使用SVG结合CSS以及JavaScript实现的开关插头操控开关的动画效果，其中的插头和点线是svg生成的，整体的样式布局以及插头接电的动画效果是通过css实现的，屏幕点击事件是通过JavaS...
球体飞跃
Canvas 3D 玻璃球星际穿越与快速移动动画效果使用 Canvas 画布实现的星际穿越动画效果，同时也是一款球体快速移动的 Canvas 动画效果，动画中包含一个立体穿越形态的水晶玻璃球飞速向未知的远方飞去，旁边是反方向飞行的似火苗，似星云一...
3D动画树
CSS 交互式 3D 毕达哥拉斯树使用3D插件three.js构建的毕达哥拉斯树动画效果，支持配置树的递归深度、颜色，控制树的放大与缩小以及旋转3D毕达哥拉斯树，颜色支持随机颜色以及闪光霓虹灯颜色，此外还支持全屏查看。
文字背景
CSS 文字打散重新组合动画背景效果使用CSS实现的一款炫酷创意十足的文字背景，实现原理是将文本附着于一张gif图片上，再通过css属性控制实现的文字打散重新组合的背景动画效果，使用该文字背景动画的网页更加炫酷且具有极强的科技感...
增删卡片
CSS 添加与移除卡片布局自动调整效果（使用view-transition-class实现）实现了灵活的增删卡片并自动调整布局的效果，卡片的布局使用了CSS的view-transition-class等关键属性实现，卡片的增删事件是由JavaScript实现的，用户可通过添加按钮（+）...
菜谱布局
CSS 极具创意的菜谱介绍网页布局使用纯CSS实现的烹饪过程菜谱介绍网页布局效果，该布局划分为两大区域，分别是食材图文介绍区以及烹饪过程视频区，两大区域可通过按钮平滑切换，其中的食材区可放置菜品成品图片以及所需要的食材和烹饪时间...
消息通知
CSS 创意溅射效果吐司 Toast 通知提示框带来4款极具创意的带溅射效果的吐司 Toast 通知组件，可用在警告提示、错误提示、成功提示以及帮助信息提示场景，通过CSS设置提示信息的background的radial-gradient属性...
四子棋
CSS 标准的四子棋小游戏只使用CSS实现的标准版四子棋小游戏，使用CSS初始化的棋盘棋子共有6行7列，基本规则: 双方轮流将棋子放进棋盘任何未全满的一列中，棋子会落到每列中最底未被占据的位置。 任何一方先完成四子连珠，...
群山地貌图
SVG 山川沟壑地貌背景图使用svg实现的山脊地貌图，全图呈褐色，只用到了svg没有任何其他的依赖，总大小只有427b,相当的轻量级，该svg地貌图支持通过鼠标或者两指触摸放大查看细节。
预加载器
CSS 金币旋转跳跃loading预加载动画效果CSS实现的发光金币腾空跳跃旋转加载中动画效果，使用了CSS的animation-duration、animation-timing-function、animation-iteration-c...
文字标记
纯 CSS 实现的轻量级文本高亮标记效果只使用 CSS 实现的文本不同颜色高亮显示文本效果，可以突出标记重点段落或文字，非常的轻量级，只需要在需要将需要高亮突出的文本置于*-highlight标签中即可，*代表的是颜色，比如green...