SVG 素描3D旋转屋Loading加载中动画效果

旋转加载器

SVG 素描3D旋转屋Loading加载中动画效果

​一款通过SVG实现的3D旋转小屋加载中动画效果,其中小房子素描简笔画及旋转动画是通过SVG实现的。不足百行代码的一款非常轻量级干净的一款预加载器。

CSS堆叠立方体的原地3D旋转动画效果

3D旋转

CSS堆叠立方体的原地3D旋转动画效果

这个效果通过使用纯CSS来实现一个堆叠立方体依次旋转的动画。多个立方体堆叠整齐的置于地面,然后按照预定的时间延迟依次旋转,最终形成一个连续的旋转效果。这种效果通常用于展示3D动画或作为页面加载时...

CSS波浪彩色3D旋转立方体,多种颜色平滑交替过度效果

旋转立方体

CSS波浪彩色3D旋转立方体,多种颜色平滑交替过度效果

通过CSS的keyframes、transform以及animation等关键属性实现的3D旋转立方体,立方体周边泛着晶莹剔透五彩缤纷的色彩变化,你可以根据自己的需求调整颜色、大小、动画速度和其...

GSAP在HTML中实现360全方位展示滑板动画效果

3D滑板

GSAP在HTML中实现360全方位展示滑板动画效果

使用 ​CSS 结合 GSAP Observer 插件实现的一个滑板3D旋转展示动画效果。底层基于CSS实现滑板的外观, GSAP (GreenSock Animation Platform) ...

GSAP实现的3D立体魔方旋转动画效果,立方体的每个面都设置了错落动画

旋转立方体

GSAP实现的3D立体魔方旋转动画效果,立方体的每个面都设置了错落动画

使用GSAP的stagger仅需要20行脚本即可实现这种3D旋转立方体,立方体的每个面都包含错落动画,并且附带放大缩小以及颜色渐变的动画效果。这样的动画不仅能够吸引用户的注意力,还能提升网页的互...

gsap.js 360度卡片原地旋转3D动画效果

3D旋转卡片

gsap.js 360度卡片原地旋转3D动画效果

​基于 gsap.js 以及 CSS 实现的3D带光影效果的360度原地旋转卡片效果,适用于银行卡、票券等卡片展示场景使用,附带逼真的光影效果特别的炫酷,卡片表面的文案、图片以及票券旋转速度支持...

CSS 3D 俄罗斯方块游戏基础版

3D旋转方块

CSS 3D 俄罗斯方块游戏基础版

使用纯 CSS 使用的 3D 旋转俄罗斯方块,初始化是一个旋转的 3D 地面,游戏开始后不同形状的立体方块从天而降落到地面,目前仅有这两步骤效果,没有添加消除的游戏效果,您可以在此动画效果上扩展...

Three.js 粗线条绘制的旋转 3D 球体和 3D 正方体

3D旋转物体

Three.js 粗线条绘制的旋转 3D 球体和 3D 正方体

​代码片段创建了两种动画,分别是多条粗线组成的 3D 旋转球体动画效果,以及多条粗线组成的 3D 立方体动画效果,3D效果是利用 Three.js 插件创建的,最终的动画效果会被绘制在 Canv...