SVG 开关插头接电动画效果

插头开关

SVG 开关插头接电动画效果

使用SVG结合CSS以及JavaScript实现的开关插头操控开关的动画效果,其中的插头和点线是svg生成的,整体的样式布局以及插头接电的动画效果是通过css实现的,屏幕点击事件是通过JavaS...

CSS 添加与移除卡片布局自动调整效果(使用view-transition-class实现)

增删卡片

CSS 添加与移除卡片布局自动调整效果(使用view-transition-class实现)

实现了灵活的增删卡片并自动调整布局的效果,卡片的布局使用了CSS的view-transition-class等关键属性实现,卡片的增删事件是由JavaScript实现的,用户可通过添加按钮(+)...

CSS + JS 实现的多步骤多状态流转动画效果

步骤流转

CSS + JS 实现的多步骤多状态流转动画效果

这是一款多功能实用的状态、多步骤手动驱动前后流转动画效果,其中 CSS 实现了状态、步骤节点的横向规范布局以及状态流转时的连线动画效果,JavaScript负责手动驱动步骤流转事件的实现。使用起...

JavaScript 鼠标悬停消息图标,快捷预览最新提醒信息

预览信息

JavaScript 鼠标悬停消息图标,快捷预览最新提醒信息

使用JavaScript结合CSS实现了鼠标悬停在消息图标上预览新信息,当有新消息到达时,消息图标的右上方会出现消息数量,当用户通过鼠标悬停于消息图标之上时,消息数量提示的地方会滚动显示主流的一...

JavaScript 带鼠标悬浮标记效果的卡片布局

交互性卡片

JavaScript 带鼠标悬浮标记效果的卡片布局

这是一款通过 CSS 样式控制生成的卡片布局效果,该卡片布局效果添加了鼠标悬停的过渡效果,当鼠标移动到卡片上方时,卡片的四周会出现一个逐渐被包围起来的蓝色边框,该蓝色边框会随着鼠标在各个边框之间...

JavaScript 仿神经元动画效果

珊瑚触手

JavaScript 仿神经元动画效果

一款极具奇幻色彩的动画效果,这款动画效果似龙爪又想珊瑚触角,更像人体神经系统中的神经元,这是一款通过JavaScript在Canvas画布中不断地绘制不同颜色、不同枝干、不同末梢而形成的动画效果...

JavaScript 拖动俄罗斯方块到指定网格小游戏

消除游戏

JavaScript 拖动俄罗斯方块到指定网格小游戏

很简单的一款消除类小游戏,同时原生的JS以及CSS实现的,通过拖动方块到指定的网格位置,当网格填充满以后游戏胜利并且重置游戏,这款半成品小游戏实现的很简单,可以在此基础上随意发挥想象力创造出可玩...

svg 乐高积木玩具随机切换背景

玩具背景

svg 乐高积木玩具随机切换背景

这是一款由 svg 矢量图制成的乐高积木玩具背景图,通过 JavaScript 事件控制颜色效果以及在用户点击屏幕或者刷新页面时重新变换组合积木形状,通过简单的css控制svg的位置,特别的轻量...

Canvas 俄罗斯方块小游戏

俄罗斯方块

Canvas 俄罗斯方块小游戏

​通过 JavaScript 驱动事件在 Canvas 画布上实现的经典俄罗斯方块小游戏,包含不同颜色的方块,可通过鼠标或者模拟键盘操控方块的变化以及移动,还能够控制游戏的背景音乐,可玩性超强,...

CSS 轻量级聊天窗口组件

网页聊天

CSS 轻量级聊天窗口组件

纯 CSS 与两行 JavaScript 实现的轻量级html5页面聊天窗口,联系人支持自由收起与打开,附带输入中动画以及个性聊天信息对话框,实现特别简单,只需要 200 行左右的 CSS 即可...

JavaScript 经典益智游戏-鸭子闯迷宫游戏

小鸭子闯迷宫

JavaScript 经典益智游戏-鸭子闯迷宫游戏

这是一款总共包含 54 个关卡的响应式益智游戏,无需各类三方插件,仅仅是基于 JavaScript 结合 CSS 实现的,不仅能在电脑上顺畅运行,在手机与平板上也能良好运行,尽管这款小游戏包含 ...

SVG 鼠标光标拖尾动画效果

创意拖尾

SVG 鼠标光标拖尾动画效果

​一款由 JavaScript 事件驱动 SVG 矢量图绘制的彩色圆球聚集到一起形成的创意鼠标拖尾动画效果,其中彩色球体的颜色、大小以及移动速度支持自定义。