CSSのみの点から黒点から別の色へのグラデーション（徐々に）

Question

liの状態はとなります。ととなります。

閉：色は黒（光がなく、お互いに折り畳まれています）。

開かれた：色は赤色（明るく、全景）です。

2つの要素の間のポイントから色が消えて、シャドウがピボットから始まり、閉じるまで表示されます。私は、これは絶対にそれに適用される勾配、および0時にアクティブに設定不透明で擬似要素「の前に」位置していた行うには見ることができました

$('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

最も簡単な方法。私はまた、簡単にするために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

最後に、ボックスシャドウイング勾配の私が心に留めていたのと同じような効果を作りたいと思っている人のために、私は答えにそのコードを残しました。

$('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>