分类目录归档:CSS3教程

CSS3 3D飞机飞行动画

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

css3-3d-plane

在线演示源码下载

纯 CSS3 3D 卧室动画

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

css3-3d-bedroom

在线演示源码下载

纯 CSS3 3D 卡片翻转动画

今天分享的是一个基于纯CSS3的价格表卡片翻转动画,点击切换按钮时,卡片就会以翻转的动画效果进行切换,同时卡片上的装饰物也会以淡入淡出和飞入飞出的动画进行切换。这款卡片切换动画呈现的3D效果是通过纯CSS3实现的,整体看上去清新自然,也十分美观,如果你的网站或者App上需要类似的功能,推荐你使用。

pure-css3-3d-card-rotate

在线演示源码下载

纯 CSS3 电风扇动画 可调节转速

这又是一个用纯CSS3实现的模拟现实物品的动画特效,它是一个可以调节转速的电动风扇,电风扇动画分两部分,一部分是扇叶转动,另一部分是风扇水平摇头,跟现实中的台扇十分相似。另外,我们还可以通过按钮来调节转速,一共分为三档。同时还有一个开关按钮,和我们生活中的风扇控制方式基本一致。而如此复杂的逻辑却是用纯CSS3实现,真的非常厉害了。

pure-css3-fans

在线演示源码下载

纯 CSS3 模拟开关单选框动画按钮

这是一个具有创意的开关单选框按钮,是通过纯CSS3实现的,我们可以利用它美化网页上的单选框元素。当开关打开时,开关按钮的背景会呈现发光的动画特效,开关关闭时则停止发光,这就很好地给用户提示了当前按钮的状态。这个按钮无论从外观还是动画特效,都是用CSS3实现,因此在网页中大范围的应用会变得非常简单和高效。

pure-css3-red-switch-button

在线演示源码下载

16个超酷的CSS3动画按钮

今天要给大家分享一组十分美妙的CSS3动画按钮集合,一共16个动画按钮,这16个按钮都会在鼠标滑过时生成不同的动画特效,有3D阴影、外框变幻、3D翻转、发光发亮等等。这些按钮最终的实现都是通过CSS3动画属性来完成的,CSS3动画本身并没有太复杂的属性样式,更多的是可以激发设计者的灵感,通过样式组合变换出各种各样奇妙的动画特效。

16-css3-animated-buttons

在线演示源码下载

CSS3发光按钮登录表单

今天给大家分享一个黑色系发光按钮登录表单,这个登录表单最大的特点在于,它有一个带炫酷动画的登录按钮。当我们将鼠标放在按钮上方时,按钮将会出现发光的动画特效,当鼠标移开时,按钮又会回到边框动态更新的动画效果。搭配黑色的背景风格,这款CSS3登录表单非常有特色,而且十分简单,建议你使用以下。

css3-login-lighting-button

在线演示源码下载

纯CSS3实现的无限级垂直手风琴菜单

今天要给大家带来一款简单实用的无限级垂直手风琴菜单,它的特点是菜单项支持无限级展开,同时还在菜单底部设计了分享按钮,整体比较协调。这款手风琴菜单是由纯CSS3实现而成,因此无论是完善还是使用,都比其他菜单插件简单,非常适合在小型的后台管理系统中使用。

pure-css3-multi-accordion

在线演示源码下载

5个不错的CSS3鼠标滑过按钮动画

今天给大家分享一组还不错的CSS3鼠标滑过按钮动画,一共有5种不同的动画效果。当我们将鼠标滑过按钮时,就分别会出现外框线条的渐变、外框的嵌入阴影以及发光背景的动画特效,按钮看起来十分清新简单,但是却都很大方,而且都只使用了<a>超链接和CSS代码实现,因此使用和扩展都非常简单。

5-mouseover-buttons

在线演示源码下载

简单精美的纯CSS垂直手风琴菜单

这是一个使用纯CSS实现的垂直手风琴菜单,菜单一共两种模式,一种是可以同时打开多个菜单项,另一种是只能同时打开一个菜单项。而且,简单的CSS样式,不仅实现简单,而且样式扩展起来也比较灵活。你可以给菜单面板添加背景,也可以给菜单项添加小图标,提升整个手风琴菜单的美观度。

pure-css-accordion-menu

在线演示源码下载