球体飞跃
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...
电流特效
SVG 电流流动能量环绕闪电动画效果通过svg结合css实现的一个充满能量和动感的能量球或电源图标,其周围环绕着流动的彩色光线,暗示着强大的能量释放或数据传输的过程。中间的闪电图标会呈现能量流动的动画效果,这款富有创意的动态视觉...
团队展示
Tailwind CSS 轮盘交互式团队展示动画效果创意十足的轮盘交互式团队展示效果,是基于 Tailwind CSS 实现的,并且实现了明暗主题模式切换的效果。团队人员围绕圆环进行分布展示,类似于轮盘的效果。当点击员工头像时该员工会置于圆环中心...