连点成线
CSS将100个点连接成线通过CSS的transform（转换）以及transition（过渡）效果实现连点成线效果，页面预置了100个span属性代表100个点元素，当鼠标悬浮于点上时，该点会向四周划线扩散，随着鼠标的...
跑马灯
CSS创意图片文字跑马灯效果，实现倾斜方向滚动轮播创建一个展示狗狗图片以及介绍的跑马灯效果。使用CSS的@keyframes规则和animation属性，可以轻松实现图片的水平或者倾斜方向滚动效果。DIV容器元素用于包裹常见的图片，并控制其显...
逼真眼球
CSS扁平化眼球轮廓，中间瞳孔左右摇摆注视四方使用CSS创建了一个眼球轮廓效果，眼球周围撒发着微光，CSS的圆角属性和绝对定位可以精确控制眼球各部分的位置和样式。伪元素用于添加瞳孔和高光效果，使眼球看起来更加逼真。整个效果只在二维平面上呈...
钟表
HTML简约时尚风格时钟通过CSS与JS实现的简约风格时钟，黑白红三色非常的干净且时尚，仅5K大小的代码量即可实现，多功能的轻量级！主要用到了CSS的transform（转换）以及transition（过渡效果）等关键...
感应小游戏
HTML四色板点按顺序与音调记忆小游戏，考验你的记忆力以及音调感知能力一款通过CSS以及JavaScript实现的非常好玩的感应小游戏，通过记忆声音播放顺序或者四色版点按顺序加上自己对音乐的感知能力挑战游戏关卡。通过点击「开始」按钮开始游戏，仔细倾听播放的音调以...
交互表单
CSS交互效果极佳的登录注册表单，在输入框中显示提示信息！这个效果通过使用CSS伪类 :focus-within、:placeholder-shown 和 :invalid 实现的表单交互效果。这些伪类可以帮助你在用户与表单元素（如输入框）进行交互时，...
水波纹
SVG波浪线波动起伏动画效果，含多种颜色以及多种弯曲弧度这个效果通过使用SVG（可缩放矢量图形）和CSS以及少量的JS代码创建的波浪动画。实现原理：通过动画化SVG polyline 元素的点（points），使其呈现出波动的效果，看起来像是水波或海浪。
方块文字
HTML实现的拼字游戏Scrabble风格木质方块文字这个效果通过使用Splitting.js库来创建类似拼字游戏Scrabble的字母方块（tiles）。当页面加载或用户点击「运行动画」按钮进行交互时，文本会被拆分成单独的字母，每个字母都显示在一...
插座触电
CSS插座触电疯狂颤抖摇晃动画效果通过CSS和少许地JavaScript实现了一种模拟触电的视觉动画效果。当用户通过鼠标点击墙上的插座孔时插座整个会颤抖摇晃起来，产生类似于触电的动画效果，当松开鼠标时页面会恢复原状。其中的插座以...
加载按钮
CSS按钮的「提交、加载、完成」完整流程动画效果这种按钮加载动画效果是通过使用CSS中的:checked伪类来模拟进度和完成状态，当复选框（checkbox）被选中时，:checked状态会被激活，从而触发预定义的CSS样式变化，这些变化包括...
水果复选框
CSS橙子与蓝莓切换实现复选框切换效果通过纯CSS实现的通过单击切换蓝莓与橙子水果来实现开关切换或者复选框效果，实现方式其实是在checkbox复选框的基础上进行扩展实现的，CSS通过监测checked事件变换不同的水果形状。
Emoji聊天
HTML中实现有趣的Emoji表情问答界面通过CSS与JS实现了一个简约交互性强的Emoji表情问答聊天界面，通过输入框提交问题，Emoji表情会给你答案，与你愉快的聊天。其中表情会根据不同的聊天语境作出不一样的动画效果。并且整体的聊...