css3制作立体导航_html/css

来源：勾落情感

慕课网学到的用css3制作立体导航，受益匪浅，配合前段时间学的二级导航，有空试，哈哈！

内容简单，但伪类after的使用需要注意！

经过修改的最终效果图：

涉及css3的知识点包括：

圆角特效：border-radius: 10px;

盒子阴影：box-shadow: 2px 5px 0px #0000cc;

文字阴影：text-shadow:1px 2px 4px rgba(0,0,0,.5);

动画过渡：transition: all 0.2s ease-in;

动画效果-旋转：transform:rotate(10deg);

颜色线性渐变背景：background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);

  CSS制作立体导航  Home
 About Me
 Portfolio
 Blog
 Resources
 Contact Me

送上一张配色图：

显示全文