慕课网学到的用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);
登录后复制

登录后复制

送上一张配色图:

09-19 00:35