9款精美别致的CSS3菜单和按钮

澳门新葡亰网址 13

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

1、超具立体感的CSS3 3D菜单 菜单项带小图标

利用HTML5可以绘制很多静态的图像,也可以制作一些炫酷的动画,本文分享了8个利用HTML5和CSS3实现的动画演示,同时也分享了源代码供大家下载参考。

记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单
3D立方体菜单项和HTML5/CSS3自定义下拉框
3D卡片折叠动画,效果都很漂亮。今天我们要再分享一款更酷的CSS3
3D立体菜单,这款菜单侧躺在页面上,每个菜单项都有不错的小图标。

1、HTML5 3D点阵列波浪翻滚动画

这个HTML5 Canvas动画非常壮观,给人一种破浪起伏的视觉效果。

澳门新葡亰网址 1

在线演示 
   
  源码下载

澳门新葡亰网址 2

2、纯CSS3实现发光开关切换按钮

这款按钮非常有个性,它的外观酷似以前老式的点灯开关,但是由于其黑色的背景,让整个按钮给人发光的效果。

澳门新葡亰网址 3

在线演示 
   
  源码下载

在线演示

澳门新葡亰网址,3、纯CSS3绘制的火龙图像

这又是一款用纯CSS3绘制的动画特效,这次是一个纯CSS3绘制的火龙图像,整条龙没有使用一张图片,完全利用了CSS3的特性。小火龙的样子还是挺逼真的,大家觉得呢?

澳门新葡亰网址 4

在线演示 
      源码下载

源码下载

4、纯CSS3天气动画图标

这是一款用纯CSS3绘制的动画图标,它描述了各种天气情况,类似天气预报一样。

澳门新葡亰网址 5

在线演示 
      源码下载

2、纯CSS3立体动画菜单 菜单项按下有内阴影

5、纯CSS3实现人物摇头动画

这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画。

澳门新葡亰网址 6

在线演示 
   
  源码下载

这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,尤其配合灰黑色的背景,让菜单显得有点立体的感觉。另外,当我们点击菜单项时,菜单项将会出现内阴影的视觉效果。

6、纯CSS3实现3D效果iPhone 6动画

这款纯CSS3实现的iPhone 6无论从哪一个角度看都是相当的逼真。

澳门新葡亰网址 7

在线演示     
  源码下载

澳门新葡亰网址 8

7、纯CSS3立体动画菜单 菜单项按下有内阴影

这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,尤其配合灰黑色的背景,让菜单显得有点立体的感觉。另外,当我们点击菜单项时,菜单项将会出现内阴影的视觉效果。

澳门新葡亰网址 9

在线演示 
   
  源码下载

在线演示

8、纯CSS3绘制的黑色图标按钮组合

这是一款基于纯CSS3的图标组合,利用CSS3,我们基本可以在网页上绘制全部矢量图形,因为CSS3的出现我们可以绘制曲线了。这款图标是黑色风格的,有几个复杂的图案需要用多层CSS代码才能实现,大部分图标的绘制还是比较简单的。

澳门新葡亰网址 10

在线演示 
      源码下载

如果你有更好的HTML5动画,也欢迎分享。

源码下载

3、HTML5/CSS3超酷环形动画菜单

今天我们要分享一款非常有创意的HTML5/CSS3动画菜单,菜单是环形的,当鼠标点击中心按钮时,子菜单即会环绕展开,并伴随很酷的菜单展开动画。

澳门新葡亰网址 11

在线演示

源码下载

4、一组超酷的CSS3 3D按钮 可定义尺寸和颜色

今天我们要来分享一款超酷的CSS3
3D按钮,这款3D按钮的设计也十分简单,支持3种不同的色彩和3种不同的尺寸大小。

澳门新葡亰网址 12

在线演示

源码下载

5、HTML5/CSS3动画下拉菜单 子菜单很酷

今天我们要来分享一款效果很不错的CSS3下拉菜单,和其他的CSS3下拉菜单功能类似,也是鼠标滑过主菜单是下拉展开子菜单,同时子菜单展开的时候有不错的动画效果,这款动画应该叫做矩形展开动画吧。

澳门新葡亰网址 13

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图