CSS磨砂玻璃背景拟物化(Skeuomorphic)风格菱形水晶玻璃刻字效果Logo图标

磨砂图标

CSS磨砂玻璃背景拟物化(Skeuomorphic)风格菱形水晶玻璃刻字效果Logo图标

基于纯 ​CSS 实现的一款磨砂玻璃背景拟物化(Skeuomorphic)风格菱形图标,菱形图标由四个小菱形组合聚合到一起组成。仿佛是在塑料玻璃方块上雕刻出的图标一样,将这个图标陈列在木质板上...

纯CSS实现的3D旋转仿真相机图标

立体旋转相机

纯CSS实现的3D旋转仿真相机图标

可左右旋转的纯 CSS 实现的 3D 立体相机图标,具有黑色和亮白色两款颜色效果。 这款相机图标非常逼真,带有灯光照射下的影子移动效果。

CSS(碳-13)原子3D结构动态运动动画效果,可在Loading加载中或者网页背景使用!

原子加载器

CSS(碳-13)原子3D结构动态运动动画效果,可在Loading加载中或者网页背景使用!

​这个运动中的(碳-13)原子由 SVG 电子轨道和 "3D "CSS 质子和中子组成。非常适合于页面加载Loading期间使用,如果应用于医学或者化学等专业网站效果更佳!

CSS实现苹果官网液晶屏显示器3D旋转多方位展示效果

3D产品展示

CSS实现苹果官网液晶屏显示器3D旋转多方位展示效果

基于CSS技巧以及DIV实现的苹果官网令人叹为观止的显示器立体旋转展示效果。由于条件限制,旋转动画只实现了一小部分,如果有需求可以在此基础上进行扩展。就像苹果官网的广告词一样「征服双眼,震撼人心...

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

旋转加载器

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

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

CSS带有灯光效果的3D箱子移动变换Loding加载中效果。

3D预加载器

CSS带有灯光效果的3D箱子移动变换Loding加载中效果。

一款通过纯CSS实现的3D带灯光照射效果的箱子移动加载器,页面有三个立体的箱子,围绕中心点旋转,并且依次展示伸缩动画效果,箱子的背面以及拉长伸缩的过程中伴随有影子变化效果,像有灯光在头顶上方照射一般。

CSS实现的塑料材质与金属边框床头电子定时闹钟

塑料闹钟

CSS实现的塑料材质与金属边框床头电子定时闹钟

​一款基于CSS实现的塑料金属材质外观床头定时电子闹钟,蓝色的外观+金属材质的数字边框组成一款特别精致的床头小闹钟,整体的外观及布局都是通过纯CSS实现的,JS只负责时间的变化时间。此外,该闹钟...

CSS实现放在桌面上的极简风格黑白主题模拟电子闹钟

极简钟表

CSS实现放在桌面上的极简风格黑白主题模拟电子闹钟

​一款通过CSS实现的白色极简风格主题模拟时钟,为了极致地体现极简模式,整个模拟时钟只使用了白色与黑色的主色调,其中表盘是白色的,而时针与分针是黑色的,仅有的两种颜色形成了鲜明的对比,将极简模...

CSS实现以3D分层的方式展示钟表等物件的内部结构

层次钟表

CSS实现以3D分层的方式展示钟表等物件的内部结构

基于CSS的transform等关键属性实现的层次感十足的倾斜悬浮3D模拟时钟,可以通过3D分层的效果展示钟表等物体的内部层次结构,时钟整体划分为四层结构,最上层是个人头像,第二次是模拟表盘,第...

CSS数字被弹出3D立体效果模拟时钟

3D时钟

CSS数字被弹出3D立体效果模拟时钟

CSS实现的表盘时刻数字为3D突出显示样式的模拟时钟,表盘的底座是白色的,时分指针以及时刻数字都是黑色的,12时刻数字基于CSS实现了3D挤出效果,有种立体的视觉感。是一款非常时尚的模拟时钟!

CSS极简风格3D悬浮LED数字时钟

LED数字时钟

CSS极简风格3D悬浮LED数字时钟

CSS实现的一款极简模式数字时钟,由完全填满数字的LED水晶灯管框架组成,由于加入了影子效果,整个时钟看起来有种3D立体感。

CSS实现拥有金属质感表盘的模拟时钟

金属钟表

CSS实现拥有金属质感表盘的模拟时钟

一款通过CSS实现的银灰色质地金属表盘模拟时钟,金属质感特别的强烈,表盘呈现三层阶梯式嵌套结构,从里到外依次变高,有种3D立体的感觉。表盘外层的12个刻度清晰可见对应12个小时,而且仔细观察表盘...