图片悬浮
HTML中基于CSS实现的一款鼠标悬浮图片边框旋转效果一款通过CSS实现的图片悬浮效果,多张图片有序的分布在一棵树形结构上,每个枝杈都有一张图片,每张图片都设置了优美的五边形边框效果,鼠标悬停于图片之上,边框会逆向或者顺向旋转一定的角度,当鼠标离...
多步骤信息
HTML中基于CSS实现的响应式多步骤信息介绍布局模板这是一款响应式多步骤流程信息介绍布局模板,当HTML网页中介绍的产品或者功能需要多个步骤信息展示才能实现或达到目标,用这款模板就对了。它基于CSS变量和网格布局(CSS Grid Layout)...
心形齿轮
HTML中仅使用CSS与SVG实现的心形内部机械齿轮运转动画效果这是一款机械齿轮心形效果,基于CSS+SVG技术实现,在一个心形图案的内部有多个彩色齿轮互相咬合着运转,展现出一种独特的机械美感。
加载器集合
HTML中基于CSS实现的72种简洁旋转风格加载中Loading动画效果这是一组纯CSS实现的加载动画,总共包含72种样式,每种效果仅需要一个HTML元素即可实现,相当的简洁。这些加载效果需要Houdini支持才能正常工作。由于Houdini目前仅在Chromium...
信息卡片
HTML中使用CSS实现响应式多选项信息卡片图表布局这是一款响应式信息图表,基于 CSS 变量和网格布局技术实现,展示了一系列美味甜点的选项。每个选项都以彩色标签的形式呈现,标签上标注了甜点名称和简短描述,整体设计简洁且视觉效果突出。
粒子散列
HTML中基于纯CSS实现的疯狂点击爆炸粒子飞散效果这是一个使用纯CSS实现的粒子爆炸效果。该动画仅使用一个关键帧keyframe即可实现,非常的轻量级。可应用于鼠标点击效果或者网页背景。
流动导航效果
HTML中使用CSS实现平滑液体流动效果标签导航栏这是一款液体标签栏平滑过渡效果,基于HTML与CSS技术实现,并辅以少量原生JavaScript代码(仅用于相应切换事件),实现了标签栏在不同选项间如液体般的平滑切换效果。
卡片布局
HTML中使用纯CSS实现的炫酷价格卡片动画效果这是一款多功能炫酷的价格卡片展示动画效果,基于纯CSS技术实现。每个价格卡片都设计了极具吸引力的切入动画入场效果,包括卡片旋转效果、文字切入效果以及卡片的轮廓都经过了精心的设计,使得卡片看起来...
下划线输入框
HTML中使用纯CSS实现的输入字符带下划线的输入框这是一款在每个字符下面都带有下划线的输入框效果,基于纯CSS技术实现。通过使用ch单位和等宽字体(monospace),确保每个字符宽度一致,为1ch。字符间的间距设定为0.5ch,即lette...
柔软按钮
纯CSS实现的交互式新拟态柔软凸起风格点赞、收藏按钮这是一款柔软凸起3D新拟态风格按钮,基于纯CSS技术实现,提供了丰富的交互体验。按钮在悬停(hover)、聚焦(focus)、按压(press)等状态下会有不同的视觉反馈,并支持保持按压、释...
加载效果
仅20行CSS与4行SVG代码实现的无限加载(∞)图标动画效果这是一款超简洁的SVG无限加载动画(∞ loader)效果。整个动画无需JavaScript支持,仅用20行CSS代码和4行生成的SVG代码即可创建出一个跨浏览器兼容、简洁且高效的无限符号(∞)...
