错误提示框
CSS实现创意密码输入框，校验不通过时输入框呈现有趣地晃动动画效果基于CSS实现的一款创意的密码输入框，当用户输入的密码不符合要求（比如长度不足）时，输入框会上下弹跳并且变为红色边框同时显示错误消息。这种设计既有趣又直观，能够吸引用户的注意力并提醒他们修正错误...
天气小组件
在HTML中基于JS和CSS实现的一款天气预报小组件Widgets在HTML中基于JS和CSS实现的一款天气预报小组件Widgets，具有两种模式：简约模式和扩展模式，这两种模式可通过点击内容进行切换。在简约模式下，只显示城市名、当前温度和天气状况；在扩展模式...
乐高加载器
CSS实现的乐高积木拼接示意动画效果预加载器利用CSS结合SVG矢量图实现的一款以乐高积木拼接动画效果为主题的预加载器，它模拟了乐高积木组装的过程，强调了构建的乐趣。在加载过程中，用户可以看到乐高积木在循环拼接与拆除的动画效果，这不仅消除...
输入图标
CSS实现经典Mac OS风格动态文本编辑器icon图标基于CSS实现的经典Mac OS风格动态文本编辑器icon图标，有手写文本以及笔写文本两种书写动画效果，仅使用CSS的animation和transition属性，为每个图标添加动态效果，并且结...
流动加载器
CSS形状依次变换实现的极简创意加载中动画效果这是一款多功能有创意的预加载动画效果，旨在通过视觉上的动态变化为用户提供个性的等待体验。在这个动画中，多个（3个）条形元素（bars）会在加载过程中从矩形逐渐转变为圆柱形状，然后再变回矩形，形成...
粘性标题
CSS实现仿手机通讯录的首字母固定滑动列表使用纯CSS实现了一个可以吸附首字母并且支持上下滑动的有序列表，跟智能手机的通讯录效果一样，上下滑动内容时，左上角会固定显示视口内容所对应的首字母。该效果是基于CSS的position: sti...
圆点切换
CSS控制轮播切换的一串圆点按钮基于CSS和JavaScript实现了一串间隔有序的蓝色实心小圆点，当任意点击其中一个圆点时，被点击的圆点会突出放大显示并变为空心圆点效果，相邻两个圆点也会适当放大，其他圆点没有各类变化。其中...
阴影效果
CSS实现的文字倒影效果，阳光下舞动的文字~使用CSS实现的文字舞动动画效果，文字立于阳光之下欢快的扭动身姿，地上的倒影随之翩翩起舞营造出一种欢快的气氛。这种效果底层是通过CSS的text-shadow实现的倒影效果，文字通过transf...
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个点元素，当鼠标悬浮于点上时，该点会向四周划线扩散，随着鼠标的...
钟表
HTML简约时尚风格时钟通过CSS与JS实现的简约风格时钟，黑白红三色非常的干净且时尚，仅5K大小的代码量即可实现，多功能的轻量级！主要用到了CSS的transform（转换）以及transition（过渡效果）等关键...