标签归档:CSS3 3D

CSS3 3D飞机飞行动画

这是一个很酷的CSS3 3D飞机飞行动画,首先飞机模型、天空白云都是通过纯CSS3绘制的,鼠标可以控制飞机飞行的方向。另外鼠标点击天空时,还可以切换白天和黑夜,飞机在黑夜中飞行时会自动点亮机翼上的警示灯并且不断闪烁。更为炫酷的是,飞机还会时不时的做翻滚动作,不论是上下翻滚还是侧面翻滚,驾驶技艺确属一流。

css3-3d-plane

在线演示源码下载

纯 CSS3 3D 卧室动画

这是一个用纯CSS3实现的3D卧室,卧室中家具齐全,有床、衣柜、书架,还有沙发等等。这些卧室中的元素都是通过CSS绘制而成的,并不是图片。另外,我们还可以通过鼠标移动来和卧室中的元素进行交互,比如将鼠标滑过书架中的书本时,书本会自动弹出,移开鼠标后又会自动藏在书架中。同样,衣柜的柜门也是如此。

css3-3d-bedroom

在线演示源码下载

超酷的CSS3复古风格和字体的3D按钮

我们分享过很多基于CSS3的3D按钮,很多都非常漂亮,例如这篇7款外观迷人的HTML5/CSS3 3D按钮特效文章中就收藏了不少。这次我们要带来一款也是基于CSS3的3D按钮,它有着复古的风格和字体。第一个按钮根据光标在悬停时的位置向左或向右倾斜,它的风格类似于老式游戏机按钮。 这些按钮配置了sm,md,lg大小类以及bootstrap-esque类,如primary,secondary,dangerous,warning,success和info。第二个按钮是一个加载程序按钮,按下它时会有自己的进度条。 它只会向中心推动,但随后向上打开,在它的正面显示一个进度条。 根据操作的成功与否,它将在完成时显示具体信息。

css3-3d-retro-button

在线演示源码下载

CSS3卡片3D翻转动画 卡片带3D按钮

很多现代网站现在都喜欢用卡片式的风格,即在首页中将文章标题、内容和主题图片制作成卡片展示。今天这款就是基于CSS3的卡片动画,卡片中的元素可以是任意HTML元素,这里比较特别的是在文字下方显示一个3D按钮,同时当我们将鼠标滑过卡片时,卡片会呈现3D的翻转动画。

css3-3d-card-button

在线演示源码下载

CSS3 3D倾斜视差图片特效

CSS3有一些属性能够实现3D的视觉效果,将这些3D特性应用到图片上时就可以让图片呈现出立体的效果。今天给大家带来的这款基于CSS3的3D倾斜视差图片特效非常不错,图片上方悬浮文字标题,并且在图片周围添加合适的投影,同时会随着鼠标的移动形成3D视差效果。

css3-3d-lean-image

在线演示源码下载

纯CSS3实现3D展开动画的图标菜单

我们知道利用CSS3可以制作很多效果炫酷的3D动画特效,比如这次要分享的一款CSS3菜单,它正是利用了CSS3的一些特性,实现了菜单展开时的3D动画特效,同时当你将鼠标滑过菜单项时,菜单项还会呈现发光的效果,从而使整体的视觉效果更佳立体炫酷。

css3-3d-icon-menu

在线演示源码下载

CSS3 3D卡片层叠动画

CSS3提供了很多属性可以实现3D效果,之前我们也分享过一些基于CSS3和HTML5的卡片动画,例如这个纯CSS3实现可感知方向的卡片翻转动画CSS3实现答题卡片抽取切换动画。这次我们给大家带来另一款基于CSS3的卡片层叠动画,它可以让若干张卡片上下层叠起来,并且在鼠标滑过时给卡片呈现发光的效果,卡片层叠起来后给人3D立体的视觉效果。

css3-card-cascading

在线演示源码下载

CSS3 3D鼠标滑过翻转按钮

之前我们分享过很多基于CSS3和jQuery的翻转按钮,比如这款纯CSS3带图标的3D旋转立方体链接别具创意的CSS3鼠标悬停翻转按钮都非常不错。今天要给大家带来另外一款基于CSS3的鼠标滑过翻转按钮,按钮有平面翻转动画,也有3D立体翻转动画。

css3-3d-hover-rotate-button

在线演示源码下载

炫酷的CSS3 3D横向菜单 菜单项凸出显示

有一段时间没有向大家分享网页菜单了,现在的网页菜单越来越炫酷,特别是CSS3和HTML5的发展,让菜单更显风韵。就比如今天要介绍的一款CSS3 3D横向菜单,整个菜单栏会随着鼠标移动而倾斜,产生一种3D立体的视觉效果,同时鼠标滑过菜单项时,菜单项也会凸出显示,是一款非常华丽而具有个性化的CSS3菜单导航插件。

css3-3d-menu-float

在线演示源码下载

CSS3 3D按钮点击弹性特效

记得很早以前我们分享过一款纯CSS3 3D按钮 按钮酷似牛奶般剔透,效果非常炫酷。这次我们要分享的同样是一款基于CSS3的3D按钮应用,这个按钮的特点是在黑色背景下,点击按钮会有弹性的动画特效,同时可以显示一个发光的选中图标。

css3-3d-button-elasticity

在线演示源码下载