jQuery / CSS3 动态阴影效果

Question

所以这个问题可能会被踩，但我想有人可能能够帮忙。

我想要的效果是蓝色方块像气球一样上下浮动，阴影随着方块的上下移动而变化，循环播放。

您有没有关于如何编写此程序的想法，或者是否知道可以实现此效果的教程/插件？

- Barney

---

你是指...在元素悬停时？还是只是一个有趣的循环动画？ - Roko C. Buljan

Answer 1

你可以使用jQuery或者CSS3来实现，取决于你自己的选择，我会向你展示两种方法：

CSS3演示

CSS3:

#box{
  position:absolute;
  top:100px;
  left:0;
  width:200px;
  height:200px;
  background:#6CB8E9;
     -moz-animation:jump 2s infinite ease-in-out;
  -webkit-animation:jump 2s infinite ease-in-out;
}

#shadow{
  position:absolute;
  top:290px;
  height:20px;
  border-radius:30px;
  left: -200px;
  background:transparent;
  width:200px;
  box-shadow:200px 0 10px 2px rgba(0,0,0,0.4);
  margin-left:0;
  opacity: 1;
     -moz-animation:shadowSize 2s infinite ease-in-out;
  -webkit-animation:shadowSize 2s infinite ease-in-out;
}

@-moz-keyframes jump {
    0%   { top:100px;}
    50%  { top:25px;}
    100% { top:100px;}
}
@-webkit-keyframes jump {
    0%   { top:100px;}
    50%  { top:25px;}
    100% { top:100px;}
}

@-moz-keyframes shadowSize {
    0%   { width:200px; margin-left:0px; opacity:1;   box-shadow:200px 0 10px rgba(0,0,0,0.7);}
    50%  { width:150px; margin-left:25px;opacity:0.3; box-shadow:200px 0 30px rgba(0,0,0,0.3);}
    100% { width:200px; margin-left:0px; opacity:1;   box-shadow:200px 0 10px rgba(0,0,0,0.7);}
}
@-webkit-keyframes shadowSize {
    0%   { width:200px; margin-left:0px; opacity:1;   box-shadow:200px 0 10px rgba(0,0,0,0.7);}
    50%  { width:150px; margin-left:25px;opacity:0.3; box-shadow:200px 0 30px rgba(0,0,0,0.3);}
    100% { width:200px; margin-left:0px; opacity:1;   box-shadow:200px 0 10px rgba(0,0,0,0.7);}
}

---

现在，使用我们亲爱的jQ...只需使用一个.png图像来代替我丑陋的box-shadow :)

jQuery演示

var li = 1; // a LoopIterations variable

function loop(){  
  
    li = ++li%2;  // reset evenly to '0' // results in 0, 1, 0, 1, 0, .... 
  
  $('#shadow').animate({
      width:       !li ? 150:200 ,
      marginLeft:  !li ? 25:0 ,
      opacity:     !li ? 0.3:1
  }, 2000);
  
  $('#box').animate({
    top:        !li ? 25 : 100
  },2000, loop);   // THIS 'loop' callback will recall the loop() function creating ... a loop :D
      
}

loop(); // start loop

解释如下： 在每次迭代中，由于取模运算符 % 的作用，li 将在奇数次迭代中设置为 0，在其他次迭代中设置为 1。

Javascript 中的 0 可以表示为 false，这很适合使用三元运算符来检查两个布尔值，例如：[true or false statement] ? [do this if true] : [do that if false] ;

!li ? 150:200 表示如果 !li （= 0 = false），则使用 200 ，否则使用 150。

此外：

<div id="box"></div>
<div id="shadow"></div>

和CSS：

#box{
  position:absolute;
  top:100px;
  width:200px;
  height:200px;
  background:#6CB8E9;
}

#shadow{
  position:absolute;
  top:310px;
  height:1px;
  background:rgba(0,0,0,0.26);
  width:200px;
  box-shadow:0 0 14px 2px #000;
  margin-left:0;
  opacity: 1;
}

- Roko C. Buljan

---

@TimMedora 添加了另一个你可能会喜欢玩的演示 :) - Roko C. Buljan

不错！看起来非常流畅。 - Tim M.

无法更好地解释了！ - Barney