jQuery / CSS3动画阴影效果 [英] jQuery / CSS3 Animated shadow effect

问题描述

所以这个问题可能会被拒绝，但我认为有人可能能够帮助。

So this question will probably get downvoted but I figure someone might be able to help.

我想找的效果是蓝色的块上下滚动一个气球，和阴影在其下生长和收缩，因为块上下循环。

The effect I am looking for is the blue block hovering up and down like a balloon, and the shadow growing and shrinking beneath it, as the block goes up and down, on a loop.

有关如何编程的任何想法，或任何人知道教程/

Any ideas on how to program this, or is anyone aware of a tutorial/plugin that might accomplish?

推荐答案

您可以使用jQuery或 CSS3 ，我会向您展示两个：

You can do it with jQuery or either with CSS3, your call, I'll show you both:

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 ：）

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或false statement]？ [do this if true]：[do that if false];

To explain: On every odd iteration li will be set to 0, and on every other to 1 thanks to % (Modulo operator).
0 in Javascript can be represented as false, great for the use of a ternary operator that will check for two Boolean values e.g: [true or false statement] ? [do this if true] : [do that if false] ;

！ 150：200 表示！li （= 0 =为false）use 200 使用 150

!li ? 150:200 means if !li (= 0 = is false) use 200 else use 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;
}

这篇关于jQuery / CSS3动画阴影效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！