纯 CSS 暖调极简商品卡片布局 + 日夜模式主题切换效果

商品展示

纯 CSS 暖调极简商品卡片布局 + 日夜模式主题切换效果

这是一款纯 CSS 实现的商品展示卡片,左图右文的经典布局,暖米色配金棕色调,整体气质克制而高级,并且支持响应式布局,在移动端等小型设备中也能通过上下布局的形式完美展示。最亮眼的是图片区域下方内...

两款拟物指针模拟时钟组件(SASS + TS)

简约时钟

两款拟物指针模拟时钟组件(SASS + TS)

这是一款基于 SASS + TypeScript 实现的实时指针时钟组件,提供两种表盘风格:上方是极简现代款,阿拉伯数字配细刻度,干净利落;下方是复古机械款,罗马数字加厚边框,中心还原了机芯摆轮...

完全支持响应式的瀑布流布局效果,仅用 CSS 的 column-count 属性实现

瀑布流布局

完全支持响应式的瀑布流布局效果,仅用 CSS 的 column-count 属性实现

这是一款瀑布流图片排列效果,仅用 CSS 的 column-count 属性实现,无需任何 JavaScript 布局计算。图片按列自动填充,高低错落、排列自然,还内置了序号显示开关方便调试,并...

纯 SVG + CSS 实现的 9 种不同风格手绘下划线悬停动画效果

手绘下划线

纯 SVG + CSS 实现的 9 种不同风格手绘下划线悬停动画效果

这是一款手绘下划线悬停动画效果,基于CSS动画+SVG Symbols+极简JavaScript技术实现。鼠标悬停导航文字时,会出现手绘风格的下划线,带有轻微的不规则感和动态描绘过程,每次显示还...

纯 CSS 带按压抬起 3D 反馈效果的拟物化风格按钮

3D按钮

纯 CSS 带按压抬起 3D 反馈效果的拟物化风格按钮

这是一款按钮交互效果,基于 CSS 阴影和变形技术实现。按钮模拟了真实物理按键的按压体验:默认状态下呈现凸起的立体感,悬停或者点击时会"陷"下去,完全还原了按实体按钮的触感反馈。这种设计最大的价...

纯 CSS 实现的简约风格模拟时钟效果

瑞士时钟

纯 CSS 实现的简约风格模拟时钟效果

这是一款实时走动的时钟效果,基于纯CSS技术实现。整个时钟走的是经典瑞士表盘路线——罗马数字刻度、金色双层表圈、三根不同颜色的指针(黑色时针、黑色分针、红色秒针),细节拿捏得很到位。最厉害的是完...

纸艺剪裁风格 3D 手表动态表盘效果(GSAP+SVG)

3D手表

纸艺剪裁风格 3D 手表动态表盘效果(GSAP+SVG)

这是一款拟物化手表动画效果,基于GSAP+SVG滤镜技术实现。整体采用纸艺剪裁风格,表盘呈现出柔和的立体层次感,像是用半透明纸片层叠出来的。最巧妙的是表盘上的时间显示——利用SVG的goo滤镜(...

CSS流星划过夜空背景特效

星空背景

CSS流星划过夜空背景特效

这是一款简约而富有意境的网页背景效果,基于 CSS 渐变与动画技术实现。画面呈现出深邃的夜空渐变色,从深蓝到近乎黑色的自然过渡,营造出宁静的夜晚氛围。右上角有一道白色光线斜向划过,模拟流星划过天...

简约现代个人博客 HTML5 网站模板(9+套布局响应式内容创作方案)

罗奥斯

简约现代个人博客 HTML5 网站模板(9+套布局响应式内容创作方案)

这是一款专为追求质感的内容创作者设计的 HTML5 响应式博客网站模板。在信息碎片化的时代,它回归了“以内容为中心”的设计初衷,通过极简且极具视觉张力的界面,为旅行、时尚、美食及摄影等领域的博主...

CSS 字母缩放创意开关切换按钮

开关切换按钮

CSS 字母缩放创意开关切换按钮

这是一款创意开关切换动效,基于CSS动画技术+React实现。核心亮点是把传统的toggle开关巧妙地融入到"on/off"文字中——左边的椭圆开关本身就充当了字母"O",圆形滑块在上下滑动时,...

熄灭所有灯光益智烧脑 HTML5 小游戏源码

逻辑解密小游戏

熄灭所有灯光益智烧脑 HTML5 小游戏源码

这是一款经典的"熄灯小游戏",基于CSS+JavaScript+HTML技术实现。游戏规则很简单:点击任意方块会切换自己和相邻方块的亮灭状态,目标是把所有亮着的橙色指示灯全部熄灭。画面设计走的是...

极简主义个人博客 HTML5 模板(支持多布局响应式排版与深浅色模式)

碧莹

极简主义个人博客 HTML5 模板(支持多布局响应式排版与深浅色模式)

这是一款专为追求纯粹阅读体验的创作者打造的个人博客 Bootstrap 响应式网站模板。它推崇极简主义美感,将现代审美与实用功能深度融合,旨在为旅行、生活方式、摄影及文学创作等领域的博主提供一个...