慕课网学到的用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);
登录后复制
登录后复制
送上一张配色图: