使用Javascript或CSS对div [Sqaure形状]的中心到角落的背景颜色进行动画处理 [英] Animate background color from center to corners of a div [Sqaure shaped] using Javascript or css

问题描述

如果可能的话，您能帮我制作这个动画吗?动画的目的是为背景色设置动画，该颜色是我想要给div动画的颜色，导致div包含我想一直显示的其他元素. 我正在寻找的动画是将颜色[包含div的灰色]从正方形的中心传播到各个角落. 有没有办法在CSS中做到这一点，如果不是，那么Javascript/Jquery/Jquery-ui呢?也许是无礼或指南针?我对上述任何方法都满意，这是一个 jsfiddle 和代码:

If possible you guys, can you help me with this animation?, the purpose of animation is to animate a background-color, the color is what i want to animate not the div cause the div contains another elements that I want to be always showing. The animation i'm looking for is to spread the color[gray of containing div] from center to corners of a square. is there a way to do it in CSS, if not how about Javascript/Jquery/Jquery-ui? maybe sass or compass? I'm fine with any of the above here's a jsfiddle and the code:

HTML:

     <div class="outer_box">
       <div class="inner_box_1"></div>

       <div class="inner_box_2"></div>

       <div class="inner_box_3"></div>

       <div class="inner_box_4"></div>
    </div>

简单的CSS可能会有所帮助:

a simple CSS that might help:

  .outer_box{
    background-color: gray;
    width: 400px;
    height: 400px;
   }
  .inner_box_1{
    background-color: yellow;
    width: 50px;
    height: 50px;
   }
  .inner_box_2{
    background-color: green;
    width: 50px;
    height: 50px;
   }
  .inner_box_3{
    background-color: blue;
    width: 50px;
    height: 50px;
   }
  .inner_box_4{
    background-color: orange;
    width: 50px;
    height: 50px;
   }

推荐答案

Am假设您不不需要渐变.

Am assuming that you do not require a gradient.

可能有纯CSS3解决方案，但这是我想到的使用jQuery的最简单的方法.

There could be pure CSS3 solutions, but this is the easiest hack I could think of using jQuery.

查看此小提琴: http://jsfiddle.net/pyf4P/2/

See this fiddle: http://jsfiddle.net/pyf4P/2/

您为outer_box div提供position: relative透明背景:

You give a position: relative and transparent background to your outer_box div:

.outer_box {
    background-color: transparent;
    width: 400px; height: 400px;
    position: relative;
}

然后，在该容器内有一个虚拟div，并从中心开始为其赋予position:absolute，并且z-index低于容器，并具有所需的背景色:

Then, have a dummy div inside that container and give it position:absolute starting from center, and with lower z-index than the container, and with your desired background color:

标记:

<div class="outer_box">
    <div class="inner_box_1"></div>
    <div class="inner_box_2"></div>
    <div class="inner_box_3"></div>
    <div class="inner_box_4"></div>
    <div id="dummy"></div> <!-- this is the dummy -->
</div>

CSS :

#dummy { 
    position: absolute;
    top: 200px; left: 200px;
    width: 1px; height: 1px;
    background-color: gray;
    z-index: -5;
}

就是这样.现在，您可以使用jQuery对此虚拟div进行动画处理:

That's it. Now you can animate this dummy div using jQuery:

$('#dummy').animate({
    'width': '400px',
    'height': '400px',
    'top': '0px',
    'left': '0px'
}, 500);

希望有帮助.

这篇关于使用Javascript或CSS对div [Sqaure形状]的中心到角落的背景颜色进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！