CSS中渐变的动态阴影

Question

CSS中渐变的动态阴影

4

我有一个cshtml页面,其中包含一些Div元素。这些Div元素根据指定的样式类着色渐变。我还添加了一个悬停类，它会将div颜色稍微变浅，从而模仿按钮的效果和悬停在上面的效果。这些div最终用于包含从MVC控制器接收到的文本。

我想做的是，在jquery中动态更改一组div的阴影。我将指定该组为红色(#FF0000)，但是该组中其余的div应该变浅。类似于W3颜色选择器中的“Shades”块http://www.w3schools.com/tags/ref_colorpicker.asp 这里是一个jsfiddle，基本上是我需要做的事情。

https://jsfiddle.net/ezxkf3qL/1/

请注意，我有两个CSS类定义颜色渐变，'red1'和'red2'。如果我有3组内共6个div，则需要构建18个不同的颜色类及其相应的悬停方法。

理想情况下，我希望每个组只有一个颜色类和一个悬停方法类。然后，jQuery会获取颜色并动态更改每个元素的“red”类的渐变颜色，以获得与我的示例中相同类型的效果。

我也尝试过类似这样的方式：

var list = $("div.col").find(".get");

var step = 100;

list.each(function(i, e) {
   var shade = i * step;
   $(this).css("background-color", "rgb(255, " + shade + "," + shade + ")");
});

这确实改变了阴影，但是使用6个元素会使其变得太轻或者无法区分不同的阴影。此外，这并不能解决我在渐变方面遇到的问题。

同样的原则也适用于按钮或任何其他元素的着色。也许有一些我不知道的jquery可以同时解决所有问题。任何帮助都将不胜感激。

- Bester

2个回答

2

我试了一下，这是我的fiddle。

我假设你只想对“红色”(#ff0000)和从红色到浅红色的光谱进行操作。上面的fiddle使用了webkit语法，你可以修改代码以适应你的需求。

var base= 0;
var others=0;
var otherbase = 100;
var step= 15;
list.each(function(i, e) {
   $(this).css("background", "linear-gradient(to bottom, rgb("+ base +","+others+","+others+") 0%,#FF0000 100%) ");

    if(base<60)
        base=base+30;
    else if(base<200)
        base= base + 15;
    else{
     base= base + 25;
        others=otherbase + step;

        otherbase=others;
    }
});

更新：

我修复了fiddle，现在你应该可以测试它了，抱歉。

代码的作用是计算有多少个.get div，并将渐变光谱从黑色到红色再到白色应用于它们。颜色的变化取决于有多少个.get div（数量越少，差异越大）。

对于悬停效果，我假设你只想让悬停的div变浅。因此，我创建了一个伪元素，只在悬停时出现，并作为半透明白色覆盖层。请参见下面的CSS代码：

.get:hover:before {
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
}

顺便提一下，这需要 jQuery。

- KiiroSora09

感谢回复KiiroSora09。我没能够运行你的小工具来查看效果，但是我已经将你的一行代码与@Nikhil的结合了起来。你可以在这里看到更新的fiddle： https://jsfiddle.net/ezxkf3qL/4/。但正如我在问题中提到的，我需要同样类型的效果用于hover类/方法。所以当我悬停在div上时，我需要它变浅，以模仿按钮的效果。 - Bester

@Bester，我更新了我的答案，不过可能有点晚了。 - KiiroSora09

哇，这太完美了，正是我所需要的！非常感谢 @KiiroSora09。 - Bester

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikhil Batra · Accepted Answer

我已经按照您的要求尝试了，可以查看以下示例 "https://jsfiddle.net/ezxkf3qL/2/" 和屏幕截图:

enter image description here

我在这里使用W3schools来检查颜色变化。为了达到这个结果，我使用了以下算法，JS代码如下:

var list = $("div.col").find(".get");

var base= 0;
var others=0;
var otherbase = 100;
var step= 15;
list.each(function(i, e) {
   $(this).css("background-color", "rgb("+ base +","+others+","+others+")");
    if(base<60)
        base=base+30;
    else if(base<200)
        base= base + 15;
    else{
     base= base + 25;
        others=otherbase + step;

        otherbase=others;
    }
});

HTML代码如下：

<div class="col">
    <div class="get mydiv1"></div>
    <div class="get mydiv2"></div>
    <div class="get mydiv3"></div>
    <div class="get mydiv4"></div>
    <div class="get mydiv5"></div>
    <div class="get mydiv6"></div>
    <div class="get mydiv7"></div>
    <div class="get mydiv8"></div>
    <div class="get mydiv9"></div>
    <div class="get mydiv10"></div>
    <div class="get mydiv11"></div>
    <div class="get mydiv12"></div>
    <div class="get mydiv13"></div>
    <div class="get mydiv14"></div>
    <div class="get mydiv15"></div>
    <div class="get mydiv16"></div>
    <div class="get mydiv17"></div>
    <div class="get mydiv18"></div>
</div>

说明：

要获得更深的色调，请保持更改R(红色)值并将其他值保持为0。然后在红色超过200之后，开始将其他G和B值增加到基础值以上，例如100。继续使用此方法，您将获得如Fiddle和图像中所示的结果。

要创建悬停效果，请使用jQuery .hover()函数：

(".get").hover(function(){
//  change background here
});