GSAP石头剪刀布小游戏升级版源码

石头剪刀布

GSAP石头剪刀布小游戏升级版源码

​这是一款趣味交互小游戏,基于GSAP技术实现,通过旋转方块的方式展示石头、剪刀、布的随机结果。以手势的方式指出最终的胜出者,为用户带来轻松有趣的游戏体验。

GSAP实现的3D旋转扭曲螺旋上升文字动画效果

扭曲龙卷风

GSAP实现的3D旋转扭曲螺旋上升文字动画效果

这是一款3D螺旋文字效果,圆柱被切割成多块,然后被拧成麻花一样的形状。立体效果明显,是基于先进的GSAP动画技术实现的。

GSAP+Zepto视差3D向屏幕外延伸的弯曲形图片轮播插件,可通过鼠标或者手指拖动控制图片切换

视差轮播

GSAP+Zepto视差3D向屏幕外延伸的弯曲形图片轮播插件,可通过鼠标或者手指拖动控制图片切换

​这是一款带有3D视差效果的照片墙展示效果,基于GSAP+Zepto技术实现。多张照片在页面中呈现横向延伸出屏幕的3D效果,这种3D弧形的照片展示效果支持通过鼠标或者手指直接拖动照片进行轮播操作...

基于CSS实现的Shopify风格按钮3D悬停效果

Shopify按钮

基于CSS实现的Shopify风格按钮3D悬停效果

这是一款基于不到100行的CSS代码实现的Shopify风格按钮,悬停时按钮凸起并且带有一定深度的阴影效果,立体感十足。跟Shopify风格类似。

基于 CSS UI 光线追踪技术实现的光照动态阴影效果

动态阴影

基于 CSS UI 光线追踪技术实现的光照动态阴影效果

这是一款基于CSS实现的动态阴影效果,通过UI光线追踪技术模拟实现。它能够根据设定的光源位置和强度,实时调整界面元素的阴影,创造出符合真实光照条件的视觉效果。此效果提升了用户界面的层次感和互动性...

HTML与CSS打造的带明显按压效果的方框内嵌按钮

凸起按钮

HTML与CSS打造的带明显按压效果的方框内嵌按钮

这是一款内嵌按钮效果,基于HTML+CSS技术实现,当用户点击按钮时,按钮会呈现出仿佛被压入屏幕的视觉感受,通过巧妙运用阴影和边框的变化来模拟按下的动作,增强了界面的交互性和真实感。

Three.js Shader驱动的图像悬停互动效果,悬停后图片产生彩色块状像素效果,并追随鼠标运动

悬停着色

Three.js Shader驱动的图像悬停互动效果,悬停后图片产生彩色块状像素效果,并追随鼠标运动

这是一款图像悬停效果,基于Three.js+Shader技术实现,当鼠标悬停在3D场景中的图像上时,图像会通过着色器产生动态的视觉变化,如变形、颜色转换或光效流动等,增强用户交互体验。

滚动页面呈现3D堆叠卡片 - 纯CSS构建的深度空间感卡片布局

堆叠

滚动页面呈现3D堆叠卡片 - 纯CSS构建的深度空间感卡片布局

这是一款滚动堆叠卡片效果,基于CSS与HTML技术实现,当用户向下滚动页面时,一系列卡片将以3D立体堆叠的方式逐渐展现。每张卡片在滚动过程中展现出深度和层次感,创造出一种逼真的空间视觉效果,增强...

CSS实现图像切片附带悬停3D凸起波浪效果,并实现了色差滤镜

波浪图片效果

CSS实现图像切片附带悬停3D凸起波浪效果,并实现了色差滤镜

这是一款纯CSS 3D余弦波悬停效果,基于CSS数学函数与3D变换技术实现。该效果摒弃了对单个元素使用z-index的传统做法,而是将常见元素置于同一个3D渲染上下文中,并为每个元素分配了一个索...

HTML中基于CSS实现3D海报展示及左右滚动切换效果,带指示滑块和镜面反射效果

3D切换

HTML中基于CSS实现3D海报展示及左右滚动切换效果,带指示滑块和镜面反射效果

这是一款惊艳的3D图片滚动轮播效果,通过上下滑动鼠标即可实现带有镜面反射效果的立体图片左右来回切换的功能。基于CSS3技术实现,通过使用transform-style: preserve-3d来...

基于CSS+SVG实现的一款简约风格3D文本,非常适合标题等号召性用语场景使用

3D文本

基于CSS+SVG实现的一款简约风格3D文本,非常适合标题等号召性用语场景使用

这是一款无阴影、无文本重复的3D效果,基于CSS+SVG技术实现。通过巧妙利用CSS的变换和透视属性,能够在不使用阴影和避免文本重复的情况下,赋予文本或内容区块以三维视觉感,并利用SVG为文本添...

纯CSS构建的3D彩色旋转边框

3D旋转边框

纯CSS构建的3D彩色旋转边框

这是一款纯CSS 3D彩色旋转边框效果,基于CSS3技术实现。通过CSS3的变换和动画属性,创造出一个看似三维空间中旋转的边框效果。这种效果可以让网页元素如图片、卡片等看起来更加立体和生动,增强...