从黑色到另一种颜色通过渐变（逐渐）从一个点只有CSS [英] Transition from black to another color through gradient (gradually) from a point with CSS only

问题描述

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

< p 已关闭：颜色为黑色（没有光线，它们彼此折叠。）

>：颜色是红色（有光，它们在全视图中）。

我希望颜色从两个元素之间的点渐变，

  $ ）.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;背景：＃2c3e50; color：#fff; text-align：center; list-style：none; vertical-align：center; line-height：3;过渡：变换.75s缓入，边缘.75s缓入，背景.75s缓入;} button.active + ul {max-height：100px;} button.active + ul> li {transform：perspective（320px）rotateX（0deg）;背景：＃e74c3c; margin：0;} li.odd {transform：perspective（320px）rotateX（-90deg）; transform-origin：top; margin-bottom：-100px;} li.even {border-top：1px dotted＃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>切换< / button>< ul> < li class =odd> Lorem< / li> < li class =even> Ipsum< / li>< / ul>  

解决方案

最简单的方式，我可以看到这样做是绝对定位的'前'伪元素与应用梯度，并且不透明度设置为0时，活动。

最简单的给你jsfiddle：

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

我已将此添加到样式中：

  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。

li states are closed and opened.

Closed: Color is black (there is no light and they are folded onto each other).

Opened: Color is red (there is light and they are in full view).

I want the color to fade from the point between the two elements, to show that the shadow starts from the pivot, until they close.

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

解决方案

Easiest way I could see to do this was absolutely positioned 'before' pseudo-element with the gradient applied to it, and the opacity set to 0 when active. I've also added a toggle on the ul itself for the sake of ease.

Easiest to give you the jsfiddle:

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

I've added this to the styles:

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);
}

and this for the sake of ease:

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

It needs some polish but it does the job. Basically when the ul is active, opacity on the gradient is set to 0, when the active class is removed, the gradient layer's opacity is animated back to 1.

这篇关于从黑色到另一种颜色通过渐变（逐渐）从一个点只有CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！