所以这个问题可能会被踩,但我想有人可能能够帮忙。
我想要的效果是蓝色方块像气球一样上下浮动,阴影随着方块的上下移动而变化,循环播放。
您有没有关于如何编写此程序的想法,或者是否知道可以实现此效果的教程/插件?
你可以使用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,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 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;
}