CSS+JS半圆形动态指针刻度调节器,通过按钮调控刻度范围!

刻度调节器

CSS+JS半圆形动态指针刻度调节器,通过按钮调控刻度范围!

JavaScript、CSS和HTML实现的动态指针刻度效果。通过CSS技术实现了一个圆形的刻度盘,刻度盘上有一条橙色的弧线标识刻度范围,黑色指针确定刻度范围。下方有一个滑块按钮,可通过点击左中...

HTML中基于CSS网格区域实现的响应式多种尺寸图片堆砌一起的「便当(Bento)网格布局」效果

网格布局

HTML中基于CSS网格区域实现的响应式多种尺寸图片堆砌一起的「便当(Bento)网格布局」效果

这是一款基于CSS网格区域实现的响应式Bento(便当)网格布局效果,通过定义网格区域将多种尺寸图片堆砌一起并支持灵活调整内容位置,适应不同屏幕尺寸。

CSS创意圆形轮盘图库组件源码下载,支持鼠标悬停图片轮播效果

轮盘图片轮播

CSS创意圆形轮盘图库组件源码下载,支持鼠标悬停图片轮播效果

这是一款轮盘图库切换动画效果,基于纯CSS技术实现,圆被分割为若干个区域,每个区域填充一张图片,当鼠标悬停于其中一张图片时,图片逐渐展开直至占领整个圆心并突出显示。支持鼠标悬停切换,提供独特的浏...

GSAP+Canvas实现的3D方块上下起伏震撼效果网页背景源码下载

3D起伏背景

GSAP+Canvas实现的3D方块上下起伏震撼效果网页背景源码下载

一款基于GSAP实现的背景效果,可用于标题等section区域背景动画效果使用,提高目标元素的视觉吸引力。实现原理是通过GSAP技术在Canvas画布中绘制流畅的动画过程,最终实现震撼的背景效果。

纯CSS实现的斜切九宫格网格画廊效果源码下载,附带悬停放大效果

九宫格图库

纯CSS实现的斜切九宫格网格画廊效果源码下载,附带悬停放大效果

这是一款斜切网格画廊效果,基于CSS clip-path技术实现,只需要在「class="wrapper"」的区域内放置九张图片,即可实现这种个性的以斜切方式排列的九宫格图库效果,形成独特的视觉...

基于Canvas+SVG+GSAP实现的钻石迷宫小游戏源码下载
精品

迷宫小游戏

基于Canvas+SVG+GSAP实现的钻石迷宫小游戏源码下载

这是一款迷宫探索小游戏,基于Canvas+SVG+GSAP技术实现,用户可以在由蓝色方块组成的迷宫中移动,黑色代表可通行区域,蓝色方块代表障碍,红色代表移动目标。通过简单的图像转换(如PNG),...

CSS页面右侧轮播滚动进度指示器效果

滚动进度

CSS页面右侧轮播滚动进度指示器效果

这是一款滚动进度指示器效果,位于页面的任意一侧区域,默认的指示器样式时数字形式,可以自定义为图片等其他形式。基于纯CSS+JS实现,使用非常简单,只需要将主内容以及指示器放置于列表UI中即可

CSS+SVG 高斯模糊图片背景效果,GSAP实现追随鼠标局部擦除模糊效果

模糊擦除效果

CSS+SVG 高斯模糊图片背景效果,GSAP实现追随鼠标局部擦除模糊效果

这是一款高斯模糊背景图片效果,基于GSAP+CSS+SVG技术实现,鼠标在图片上移动交互过程中,除了焦点区域保持清晰外,周围的图片背景元素会呈现出不同程度的高斯模糊效果,使得用户注意力集中在鼠标...

CSS固定顶部渐变模糊导航菜单效果

磨砂玻璃头部菜单

CSS固定顶部渐变模糊导航菜单效果

​这是一款页面头部渐变磨砂玻璃效果,基于CSS与图形处理技术实现,在页面的顶部菜单导航区域创建出一个具有色彩渐变和模糊过渡的模糊视觉元素,随着页面滚动磨砂玻璃头部固定不动,增强网页设计的深度与互动性。

CSS实现的滚动分区圆点指示器,通过页面右侧小圆点的位置移动直观的反应阅读进度

滚动指示器

CSS实现的滚动分区圆点指示器,通过页面右侧小圆点的位置移动直观的反应阅读进度

这是一款滚动区域指示器效果,基于CSS和HTML以及gsap技术实现,在用户浏览不同页面分区时,通过右侧的多个圆点位置的移动归类来指示当前所处的页面部分。这种效果通常应用于长页面或多分区布局中,...

Flexbox驱动的优雅Accordion - 纯CSS实现的交互响应式伸缩面板

折叠面板

Flexbox驱动的优雅Accordion - 纯CSS实现的交互响应式伸缩面板

这是一款响应式弹性折叠面板(Accordion)效果,基于CSS Flexbox以及Grid网格布局技术实现,允许用户通过点击标题来展开或收起相应的图文内容区域。每个面板项在展开时会优雅地扩展,...

CSS实现的4款不同风格的卡片边角死丝带效果

边角丝带

CSS实现的4款不同风格的卡片边角死丝带效果

这是一款纯CSS实现的折叠丝带效果,巧妙地避开了使用clip-path时出现的难看边缘线问题,并且不依赖于将元素移出可视区域的999px hack技巧。通过精心设计的CSS属性和伪元素,创造出自...