通过渐变（逐渐）从一个点用CSS转换为另一种颜色

Question

li状态为已关闭和已打开。

已关闭：颜色是黑色的（没有光线，它们互相折叠）。

打开：颜色是红色（有光线，他们在全视图中）。

我想要的颜色从两个元素之间的点消失，表明影子从枢轴开始，直到他们关闭。我可以看到这样做与施加到其上的梯度伪元素“前”是绝对定位

$('button').on('click', function() { 
 
    $(this).toggleClass('active'); 
 
});

ul { 
 
    width: 320px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    max-height: 0; 
 
    transition: max-height .75s ease-in-out; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #2c3e50; 
 
    color: #fff; 
 
    text-align: center; 
 
    list-style: none; 
 
    vertical-align: center; 
 
    line-height: 3; 
 
    transition: transform .75s ease-in-out, margin .75s ease-in-out, background .75s ease-in-out; 
 
} 
 
button.active + ul { 
 
    max-height: 100px; 
 
} 
 
button.active + ul > li { 
 
    transform: perspective(320px) rotateX(0deg); 
 
    background: #e74c3c; 
 
    margin: 0; 
 
} 
 
li.odd { 
 
    transform: perspective(320px) rotateX(-90deg); 
 
    transform-origin: top; 
 
    margin-bottom: -100px; 
 
} 
 
li.even { 
 
    border-top: 1px dashed #bf2718; 
 
    transform: perspective(320px) rotateX(90deg); 
 
    transform-origin: bottom; 
 
    margin-top: -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button> 
 
    Toggle 
 
</button> 
 
<ul> 
 
    <li class="odd">Lorem</li> 
 
    <li class="even">Ipsum</li> 
 
</ul>

Answer 1

最简单的方式，并且不透明度设置为0时激活。为了方便起见，我还在ul本身上添加了一个切换。

最容易给你的jsfiddle：

https://jsfiddle.net/efreeman79/8oemm50L/1/

我已将此添加到样式：

li:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 1; 
    transition: all 0.35s ease; 
    /* GRADIENT CSS CODE HERE */ 
} 

.active li:before { 
    opacity: 0; 
} 

li.even:before { 
    transform: rotate(180deg); 
} 

，这便于着想：

$('ul').toggleClass('active'); 

它需要一些波兰人，但它做的工作。基本上，当ul处于活动状态时，渐变上的不透明度设置为0，当删除活动类时，渐变图层的不透明度将恢复为1.

Answer 2

最后，我决定改用box-shadowing的梯度。对于所有想要创建类似于我的想法的效果，我都将代码留在了我的答案中。

$('button').on('click', function() { 
 
    $(this).toggleClass('active'); 
 
});

ul { 
 
    width: 320px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    max-height: 0; 
 
    transition: max-height .75s ease-in-out; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    width: 100%; 
 
    height: 50px; 
 
    color: #fff; 
 
    text-align: center; 
 
    list-style: none; 
 
    vertical-align: center; 
 
    line-height: 3; 
 
    background: #e74c3c; 
 
    transition: transform .75s ease-in-out, margin .75s ease-in-out, box-shadow .75s ease-in-out; 
 
} 
 
button.active + ul { 
 
    max-height: 100px; 
 
} 
 
button.active + ul > li { 
 
    transform: perspective(320px) rotateX(0deg); 
 
    box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0); 
 
    margin: 0; 
 
} 
 
li.odd { 
 
    transform: perspective(320px) rotateX(-90deg); 
 
    box-shadow: inset 0px -50px 20px 0px rgba(0,0,0,0.75); 
 
    transform-origin: top; 
 
    margin-bottom: -100px; 
 
} 
 
li.even { 
 
    border-top: 1px dashed #bf2718; 
 
    transform: perspective(320px) rotateX(90deg); 
 
    box-shadow: inset 0px 50px 20px 0px rgba(0,0,0,0.75); 
 
    transform-origin: bottom; 
 
    margin-top: -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button> 
 
    Toggle 
 
</button> 
 
<ul> 
 
    <li class="odd">Lorem</li> 
 
    <li class="even">Ipsum</li> 
 
</ul>