周六的html学习

导航栏的设计准备让他固定在页面的顶端，然后可以隐藏这样子的设置position属性为fixed，然后设定各项参数即可。

.menu{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        margin: 0;
        /* 区别于relative，fixed各种参数需要手动设置 */
        text-align:center;
        background-color: white;
    }

透明度变化，在hover中设置opacity参数，为了不瞬间变化在初始设置时加入
transition: opacity .5s ease-in-out;达到淡入淡出的效果
运行后发现整个导航栏都会淡入淡出，看起来很费眼睛，所以专门做另一个负责淡入淡出透明变化的导航栏
原先的就把他直接设置成高度0防止挡住menubar的判定区域


但是menu-item的高度还是存在，所以要让他屏蔽鼠标事件,以及超链接可以响应鼠标事件

.menu li.menu-item{
        line-height:50px;
        width: 80px;
        display:inline-block;
        margin:0 20px 0 0;
        pointer-events: none;
    }
.menu li.menu-item a{
        text-align: center;
        text-decoration: none;
        color:black;
        opacity: 1;
        pointer-events: visible;
    }

但是吧，超链接响应了，menubar就无法响应……

重新整理思路，我们可以把menubar放在menu里面和menu-item并列置底，z-index:-1;，这样可以使用menu:hover控制鼠标在menu范围内都可以触发，最终达到了我想要的效果
（注意：CSS中只能父元素hover控制子元素，不能控制无关元素，要实现只能用JS）
代码如下

.menu,.menu .menubar{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        margin: 0;
        padding: 0;
        text-align:center;
        /* 固定在上方作为导航栏，因此各种参数需要手动设置 */
    }
    .menu .menubar{
        z-index: -1;
        height:50px;
        opacity:0;
        background-color: white;
        transition: opacity 0.5s ease-in-out;
    }
    .menu .menu-item{
        line-height:50px;
        width: 80px;
        /* 导航栏菜单的行高宽度 */
        display:inline-block;
        margin:0 20px 0 0;
        pointer-events: none;
    }
    .menu .menu-item a:link,a:visited{
        text-align: center;
        text-decoration: none;
        /* 文字居中，去除超链接下划线 ,居中放在item中也可以*/
        color:black;
        opacity: 1;
        pointer-events: visible;
    }

    .menu:hover .menubar
    {
        opacity: .8;
        box-shadow:0 0 2px 2px rgba(172,172,172,.4);
        /* 透明度变化以及阴影效果 */
    }

不过目前对导航栏超链接效果仍然不是很满意，查到一个很好玩的方法，可以实现字体背景移动。需要chrome核
在参数中设置

@-webkit-keyframes masked-animation {
                0% {
                    background-position: 0 0
                }
                to {
                    background-position: -100% 0
                }
            }
p {
                margin: 200px auto;
                width: 400px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                color: hsla(0, 0%, 100%, .65);
                font-weight: 800;
                font-size: 52px;
                background-image: -webkit-linear-gradient(left, #cddc39, #ff9800 25%, #cddc39 50%, #ff9800 75%, #cddc39);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip:text;
                background-size: 200% 100%;
                animation: masked-animation 2s infinite linear;
            }

background-image可以使用图片，此处为渐变色。
原理是通过字体背景色透明化，来观测背景图片，然后移动图片即有字体颜色变化效果