当前位置：Gxlcms > html代码 > css3制作立体导航_html/css_WEB-ITnose

css3制作立体导航_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：24人阅读

慕课网学到的用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

送上一张配色图：

人气教程排行