css3制作立体导航_html/css_WEB-ITnose
程序员文章站
2022-04-09 19:16:53
...
慕课网学到的用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制作立体导航
送上一张配色图：
上一篇： html文件里include文件内容
下一篇： MySQL视图的应用之创建视图