ایجاد جعبه های لرزش دار

[Mori Bone]

سلام
من چوطوری جعبه ی لاگین سایتم رو مثله صفحه لاگین وردپرس یا سیستم عامل مک در صورت وارد شدن اطلاعات غلط بلرزونم.
من یه فرم لاگین دارم ک وقتی سابمیت شد توی همون صفحه با دستورات php خطا های ایجاد شده رو برمی گردونم.
با کد زیر اون div ی که می خوامو می لرزونم ولی نمی دونم چطوری وقتی با php اطلاعات چک شد و اطلاعات غلط بود، جعبه بلرزه؟
<script type="text/javascript"> $('#loginform').effect( "shake", {times:4}, 700 ); </script>

[Mehdi_Persian]

میتونی به این شکل دستورات رو بنویسی:



if (شرط مورد نظر)
{
echo '<script type="text/javascript"> $('#loginform').effect( "shake", {times:4}, 700 ); </script>';}

[Mori Bone]

میتونی به این شکل دستورات رو بنویسی:



if (شرط مورد نظر)
{
echo '<script type="text/javascript"> $('#loginform').effect( "shake", {times:4}, 700 ); </script>';}


این کارو انجلم دادم نشد

[130000]

سلام



@keyframes shadow{
33%{
transform:rotate(3deg);
box-shadow:0 0 25px 0 #F00;
}
66%{
transform:rotate(0deg) scale(1.2) ;
box-shadow:0 0 35px 0 #F00;
}
100%{
transform: rotate(-3deg);
box-shadow:0 0 25px 0 #F00;
}
}

@keyframes shadow2{
33%{
transform:rotate(3deg);
box-shadow:0 0 25px 0 #0C0;
}
66%{
transform:rotate(0deg) scale(1.2) ;
box-shadow:0 0 35px 0 #0C0;
}
100%{
transform: rotate(-3deg);
box-shadow:0 0 25px 0 #0C0;
}
}

@keyframes shadow3{
33%{
transform:rotate(3deg);
box-shadow:0 0 25px 0 #06F;
}
66%{
transform:rotate(0deg) scale(1.2) ;
box-shadow:0 0 35px 0 #06F;
}
100%{
transform: rotate(-3deg);
box-shadow:0 0 25px 0 #06F;
}
}

@keyframes shadow4{
33%{
transform:rotate(3deg);
box-shadow:0 0 25px 0 #F90;
}
66%{
transform:rotate(0deg) scale(1.2) ;
box-shadow:0 0 35px 0 #F90;
}
100%{
transform: rotate(-3deg);
box-shadow:0 0 25px 0 #F90;
}
}


*{
margin:0;
padding:0;
}
div {
margin:50px 100px;
width:200px;
height:100px;
text-align:center;
font-size:80px;
color:#fff;
background:rgba(0,0,0,.3);
border-radius:50px;
transition-duration:5s;


}

#div1:hover{
background:#C33;
animation-name:shadow;
transition-duration:2s;
animation-duration:.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
box-shadow:0 0 25px 0 #000;
transition:background 5s linear ,box-shadow 5s linear;

}

#div2:hover{
background:#0C0;
animation-name:shadow2;
transition-duration:2s;
animation-duration:.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
box-shadow:0 0 25px 0 #000;
transition:background 5s linear ,box-shadow 5s linear;

}

#div3:hover{
background:#06F;
animation-name:shadow3;
transition-duration:2s;
animation-duration:.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
box-shadow:0 0 25px 0 #09F;
transition:background 5s linear ,box-shadow 5s linear;

}

#div4:hover{
background:#F90;
animation-name:shadow4;
transition-duration:2s;
animation-duration:.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
box-shadow:0 0 25px 0 #000;
transition:background 5s linear ,box-shadow 5s linear;

}









<div id="div1">1</div>

<div id="div2">2</div>

<div id="div3">3</div>

<div id="div4">4</div>





موفق باشید...