jQuery / CSS3动画阴影效果

所以这个问题可能会被低估,但我认为有人可能会提供帮助.

我正在寻找的效果是蓝色的块像气球一样上下盘旋,阴影在它下面生长和收缩,随着块在一个循环上上下移动.

关于如何编程的任何想法,或者是否有人知道可能实现的教程/插件？

解决方法

您可以使用jQuery或 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.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.7);}
    50%  { width:150px; margin-left:25px;opacity:0.3; Box-shadow:200px 0 30px rgba(0,0.3);}
    100% { width:200px; margin-left:0px; opacity:1;   Box-shadow:200px 0 10px rgba(0,0.7);}
}
@-webkit-keyframes shadowSize {
    0%   { width:200px; margin-left:0px; opacity:1;   Box-shadow:200px 0 10px rgba(0,0.7);}
}

现在,用我们亲爱的jQ …只需使用.png图像作为阴影而不是我丑陋的盒子阴影:)

jQuery demo

var li = 1; // a LoopIterations variable

function loop(){  

    li = ++li%2;  // reset evenly to '0' // results in 0,1,.... 

  $('#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,非常适合使用三元运算符来检查两个布尔值,例如：
[真或假的陈述]？ [如果这是真的]：[如果这是假的话];

！李？ 150：200表示如果！li(= 0 =为假)使用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.26);
  width:200px;
  Box-shadow:0 0 14px 2px #000;
  margin-left:0;
  opacity: 1;
}

jQuery / CSS3动画阴影效果

解决方法

猜你在找的jQuery相关文章