通過漸變（逐漸）從一個點用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>