高尔夫单选框
CSS利用高尔夫进洞的动画效果实现创意且趣味性十足的单选按钮（radio buttons）这个效果通过使用CSS来创建一个类似于迷你高尔夫（Putt-Putt）的游戏界面实现创意且趣味性十足的单选按钮（radio buttons）。每个单选按钮被设计成一个高尔夫球洞，当用户选择某个选...
UFO
CSS实现UFO灯光照亮地面效果使用CSS实现的UFO模型效果，在html中预先定义UFO的头部：head，主体：body，灯光：beam等五个区域，然后通过CSS的定位position、背景background以及z-ind...
太阳光芒
CSS太阳发光动画效果基于CSS实现的太阳以及太阳光芒四射动画效果，整个太阳呈现出一种炙热的沸腾感，实现方式：先定义若干个div为ray的元素，代表阳光，外层是div为sun的「太阳」区域，然后通过CSS的anima...
连点成线
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实现了一种模拟触电的视觉动画效果。当用户通过鼠标点击墙上的插座孔时插座整个会颤抖摇晃起来，产生类似于触电的动画效果，当松开鼠标时页面会恢复原状。其中的插座以...