一款非常棒的纯CSS3 3D菜单演示及制作教程
这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码。下面是效果图:
看了效果图是不是觉得它是一副麻将,对,第一眼我也认为是用CSS3写的麻将特效,结果我错了,它只是长得比较像而已。
另外,你也可以在这里直接查看菜单的DEMO演示。
接下来再分析一下实现这款3D菜单的源代码。
代码主要由HTML和CSS3组成,应该说还是比较简单的。
首先是HTML代码:
<ul>
<li>
<a class='list-item' href=''>
<i class='icon-reorder'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-th-large'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-bar-chart'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-tasks'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-bell'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-archive'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-comment'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-sitemap'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-thumbs-up'></i>
</a>
</li>
<li>
<a class='list-item' href=''>
<i class='icon-tumblr'></i>
</a>
</li>
</ul>
这里用了标准的ul li列表来构建菜单的HTML框架,层次非常清晰。
接下来重点是CSS代码,如何用CSS3的特性来实现菜单的侧躺和阴影效果,从来让其看起来呈3D的状态。
ul {
position: relative;
-webkit-transform: rotate(-35deg) skew(20deg, 5deg);
-moz-transform: rotate(-35deg) skew(20deg, 5deg);
-ms-transform: rotate(-35deg) skew(20deg, 5deg);
-o-transform: rotate(-35deg) skew(20deg, 5deg);
transform: rotate(-35deg) skew(20deg, 5deg);
}
上面的这几行代码很关键,我们也可以看出用了CSS3的transform属性的rotate()实现菜单整体旋转一定角度,然后用skew()让菜单倾斜一个角度,这样菜单就开始有3D立体的感觉了。
接下来是每一个菜单项的样式:
.list-item {
background: #000000;
color: #575757;
text-align: center;
height: 2.5em;
width: 4em;
vertical-align: middle;
line-height: 2.5em;
border-bottom: 1px solid #060606;
position: relative;
display: block;
text-decoration: none;
-webkit-box-shadow: -2em 1.5em 0 #e1e1e1;
-moz-box-shadow: -2em 1.5em 0 #e1e1e1;
box-shadow: -2em 1.5em 0 #e1e1e1;
-webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
-moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
-o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
}
.list-item:hover {
background: #ff6e42;
color: #fffcfb;
top: -0.5em;
left: 0.5em;
-webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
-moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
-o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
-webkit-box-shadow: -2em 2em 0 #e1e1e1;
-moz-box-shadow: -2em 2em 0 #e1e1e1;
box-shadow: -2em 2em 0 #e1e1e1;
}
.list-item:hover:before, .list-item:hover:after {
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.list-item:hover:before {
background: #b65234;
width: 1em;
top: 0.5em;
left: -1em;
}
.list-item:hover:after {
background: #b65234;
width: 1em;
bottom: -2.5em;
left: 1em;
height: 4em;
}
.list-item:before, .list-item:after {
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.list-item:after {
content: "";
position: absolute;
height: 4em;
background: #181818;
width: 0.5em;
bottom: -2.25em;
left: 1.5em;
-webkit-transform: rotate(90deg) skew(0deg, 45deg);
-moz-transform: rotate(90deg) skew(0deg, 45deg);
-ms-transform: rotate(90deg) skew(0deg, 45deg);
-o-transform: rotate(90deg) skew(0deg, 45deg);
transform: rotate(90deg) skew(0deg, 45deg);
}
.list-item:before {
content: "";
position: absolute;
height: 2.5em;
background: #121212;
width: 0.5em;
top: 0.215em;
left: -0.45em;
-webkit-transform: skewY(-45deg);
-moz-transform: skewY(-45deg);
-ms-transform: skewY(-45deg);
-o-transform: skewY(-45deg);
transform: skewY(-45deg);
}
我们可以看到用了shadow实现每一个菜单项都有投影,至此,整个菜单的3D效果就已经渲染完了。
另外就是鼠标滑过菜单项的效果,利用了CSS3的动画特性让菜单项背景色渐变,形成凸起的效果。
整个实现就是这样了,你可以下载源代码,下载地址>>
一款非常棒的纯CSS3 3D菜单演示及制作教程的更多相关文章
- 7款外观迷人的HTML5/CSS3 3D按钮特效
1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 8款超酷实用的CSS3 Tab菜单集合
1.CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活.今天我们要再来分享一款基于CSS3的 ...
- 简单3D翻页相册制作教程
3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQz ...
- 7款效果惊人的HTML5/CSS3应用
今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单 作为前端开发者,各种各样的jQuery菜单见过不少,这款 ...
随机推荐
- 小巧的UML工具-UMLet
画简单的UML图时非常方便 比如我画blog中的流程图就是用的UMLet
- 从头开始建网站(三)DNS
前面介绍了站点搭建所须要的两大要素:域名和server,这次要说的是域名解析,也就是把域名和server进行绑定的过程. 我们在訪问网络时,网址会被发送到DNSserver,然后由DNSserver返 ...
- Visual Studio 2013中c#语言规范5.0
文件位置 vs安装路径 "C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC#\Specifications\2052\CSharp ...
- 调整CentOS的文字登陆界面的分辨率
通过文字界面登陆到系统,切换到root权限. 用vi打开 /boot/grub/menu.lst 文件 ,因为menu.lst是grub.conf文件的快捷方式,终于打开的还是grub.conf文 ...
- 【Java基础】System.arraycopy()的使用详解
由于在Java中System.arraycopy()方法在一维数组和二维数组中的表现不同,所以做了一个测试 public static void main(String[] args) { int[] ...
- Android 应用程序启动过程源代码分析
本文转自:http://blog.csdn.net/luoshengyang/article/details/6689748 前文简要介绍了Android应用程序的Activity的启动过程.在And ...
- UVa 10397 Connect the Campus
最小生成树 Kruskal #include<cmath> #include<iostream> #include<cstdio> #include<algo ...
- Java静态字段(属性、方法、类别)
假设域被定义为static,那么每个类中仅仅有一个这种域.作为对照,每个对象对于全部的实例域却都有自己的一份拷贝. 比如,假定须要给每个雇员赋予唯一的标识码. 这里给Employee类加入一个实例域i ...
- 前端是Sencha Touch+ Cordova(转)
从13年初开始,我的关注点一直在两个点上,一个是股票,一个是移动前端和大数据技术,互联网金融的发展会让互联网证券越来越火热,当然,我也希望将这两个关注点结合到一起,做一些事情. 现在,我的APP和 ...
- MIFARE系列7《安全》
飞利浦的MIFARE卡因为它的高安全性在市场上得到广泛应用,比方我们乘车用的公交卡,学校和企业食堂的饭卡等等.它每一个扇区有独立的密匙(6个字节的password),在通信过程中首先要验证密匙才干读写 ...