菜单光棒划出效果

两个要点

要点：

1. z-index为任意值，包括负值，可实现与isolation: isolate;一样效果，生产独立的层级上下文。

   产生独立层级的目的是为了让绝对定位的伪元素显示在元素上方，但是在文字下方

   如果仅仅将伪元素的z-index设置为-1，则伪元素会显示在元素下方，将不可见

2. 元素的scaleX宽度变化，扩大从中间向两侧扩大，缩小从两侧向中间缩小，原因是transform-origin默认值为center，遮罩元素从两侧向中间收缩

    若遮罩transform-origin为left center，则光棒从右向左伸展

    若遮罩transform-origin为right center，则光棒从左向右伸展

    若改为元素伸展，则transform-origin为left center，为元素从左向右伸展，更为直观一些

3. 菜单划出动画用background来实现，其实更简洁

基本结构

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

1. 两侧向中间高亮效果

此时遮罩负责遮盖元素背景色

li{
    position: relative;
    margin-top: 10px;
    background: lightsalmon;
    /* isolation: isolate; */
    z-index: 1;
    padding-left: 10px;
}
li:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    transition: .3s ease-out;
    /* transition-timing-function: cubic-bezier(.52,1.64,.37,.66); */
}
li:hover:before{
    transform: scaleX(0);
}
li:hover{
    cursor: pointer;   
    color: #fff; 
}
ul{width: 200px;list-style: none;}

2. 左侧划出效果

此时遮罩负责显示高亮色

li{
    position: relative;
    margin-top: 10px;
    z-index: 1;
    padding-left: 10px;
}
li:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: lightsalmon;
    transition: .3s ease-out;
    transform: scaleX(0);
    transform-origin: left center;
}
li:hover{
    color: #fff;
    cursor: pointer;
}
li:hover:before{
    transform: scaleX(1);
}
ul{width: 200px;list-style: none;}

3. background-size实现

li{
    position: relative;
    margin-top: 10px;
    z-index: 1;
    background: linear-gradient(lightcoral 0 0) no-repeat;
    background-size: 0;
    transition: background-size .3s;
    padding-left: 10px;
}
li:hover{
    background-size: 100%;
    color: #fff;
    cursor: pointer;
}
ul{width: 200px;list-style: none;}

4. background-position实现

li{
    position: relative;
    margin-top: 10px;
    z-index: 1;
    background: linear-gradient(lightcoral 100%, #0000 0) no-repeat;
    background-size: 200%;
    transition: background-position 1s;
    padding-left: 10px;
    background-position: 200%;
}
li:hover{
    background-position: 100%;
    color: #fff;
    cursor: pointer;
}
ul{width: 200px;list-style:none;}

 

 

可参考此文的右侧导航的高亮效果 JavaScript 如何将一个迭代器转化为一个数组 和 此文 CSS 如何使用CSS替换或更改文本效果对比

要实现背景渐变可参考此文 CSS背景渐变支持transition过渡效果