بانک کد bank code

بانک کد فوق العاده

سلام امروز قصد دارم یه سیستم فوق العاده عالی و کاربردی رو بهتون معرفی کنم که هر طراحی لازمه این کدهارو داشته باشه و شک نکنید که از این کدها خیلی در طراحی و برنامه نویسی تون استفاده خواهید کرد.

این بانک کد به 4بخش html,css,javascript,php تقسیم شده که تعداد زیادی کد از هر بخش در این سیستم وجود داره.

برای استفاده از این بانک کد شما فقط کافیه بر روی سیستم تون نرم افزار xampp یا wamp رو نصب کنید و پس از دانلود فایل فولدرش رو در xampp/htdocs و یا در wamp/www کپی کنید و از طریق مرورگر این آدرس رو بزنید

[php]

127.0.0.1/bank

[/php]

امیدوارم از این بانک کد نهایت استفاده رو ببرید :)

فایل راهنما نیز در داخل فایل موجود هستش

موفق باشید

1403330388

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

آموزشی که امروز قراره بهتون بگم یه جورایی در متن مطلب قرار گرفته و توضیح کامل ترش اینه که شما اگه یه فیلد برای ارسال ایمیل در سایت قرار میدید دکمه submit یا همون ارسال فقثط زمانی رویت میشه که کاربر ایمیل رو به صورت صحیح وارد کرده باشه

برای شروع ابتدا کد html رو قرار بدید :

[php]

<form class="newsletter">
<input type="email" value="" placeholder="Enter your email address" />
<input type="submit" value="OK" />
</form>

[/php]

و حالا کد جی کوئری :

[php]

$( function( window, document, undefined )
{
‘use strict’;

var form = ‘.newsletter’,
className = ‘newsletter–active’,
email = ‘input[type="email"]’,

addEventListener = function( element, event, handler )
{
element.addEventListener ? element.addEventListener( event, handler ) : element.attachEvent( ‘on’ + event, function(){ handler.call( element ); });
},
forEach = function( elements, fn )
{
for( var i = 0; i < elements.length; i++ ) fn( elements[ i ], i );
},
addClass = function( element, className )
{
element.classList ? element.classList.add( className ) : element.className += ‘ ‘ + className;
},
removeClass = function( element, className )
{
element.classList ? element.classList.remove( className ) : element.className += element.className.replace( new RegExp( ‘(^|\\b)’ + className.split( ‘ ‘ ).join( ‘|’ ) + ‘(\\b|$)’, ‘gi’ ), ‘ ‘ );
};

forEach( document.querySelectorAll( form ), function( $form )
{
var $email = $form.querySelectorAll( email );

if( $email.length )
{
$email = $email[ 0 ];
addEventListener( $email, ‘keyup’, function()
{
$email.value != ” && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( $email.value ) ? addClass( $form, className ) : removeClass( $form, className );
});
}
});
})( window, document );

[/php]

این سه مقدار زیر رو میتونید به دلخواه با توجه به راهنمایی که کرده تغییر بدید :

[php]

var form = ‘.newsletter’, // form selector
className = ‘newsletter–active’, // class name for form when correct email is entered
email = ‘input[type="email"]’, // email input field selector

[/php]

و در آخر هم یه خط کد css رو باید اضافه کنید

[php]

.newsletter:not( .newsletter–active ) input[type=’submit’]
{
display: none;
}

[/php]

امیدوارم بپسندید

tabeed jquery

ساخت تب زیبا با جی کوئری

سلام.امروز قصد دارم آموزش ساخت تب رو بهتون بگم

برای شروع ابتدا کد html زیر رو در جایی که میخواید این تب قرار بگیره بزارید :

[php]

<div style="width: 500px; margin: 0 auto; padding: 120px 0 40px;">
<ul class="tabs" data-persist="true">
<li><a href="#view1">Lorem</a></li>
<li><a href="#view2">Using other templates</a></li>
<li><a href="#view3">Advanced</a></li>
</ul>
<div class="tabcontents">
<div id="view1">
<b>Lorem Issum</b>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…</p>

</div>
<div id="view2">
<b>Switch to other templates</b>
<p>Open this page with Notepad, and update the CSS link to:</P>
<p>template1 ~ 6.</p>
</div>
<div id="view3">
<b>Advanced</b>
<p>We have an advanced version, <a href="http://www.menucool.com/jquery-tabs">McTabs – jQuery Tabs</a>, that is the most feature-rich Tabs.</p>

</div>
</div>
</div>

[/php]

دقت کنید کد بالا یه نمونه هستش و اگه شما بخواید تب دیگه اضافه کنید باید در تگ ul یه تگ li دیگه اضافه کنید و مانند بالا لینک #view بهش بدید.

حالا فقط کافیه کد جی کوئری زیر رو هم به کدهاتون اضافه کنید :

[php]

(function(){var g=function(a){if(a&&a.stopPropagation)a.stopPropagation();else window.event.cancelBubble=true;var b=a?a:window.event;b.preventDefault&&b.preventDefault()},d=function(a,c,b){if(a.addEventListener)a.addEventListener(c,b,false);else a.attachEvent&&a.attachEvent("on"+c,b)},a=function(c,a){var b=new RegExp("(^| )"+a+"( |$)");return b.test(c.className)?true:false},j=function(b,c,d){if(!a(b,c))if(b.className=="")b.className=c;else if(d)b.className=c+" "+b.className;else b.className+=" "+c},h=function(a,b){var c=new RegExp("(^| )"+b+"( |$)");a.className=a.className.replace(c,"$1");a.className=a.className.replace(/ $/,"")},e=function(){var b=window.location.pathname;if(b.indexOf("/")!=-1)b=b.split("/");var a=b[b.length-1]||"root";if(a.indexOf(".")!=-1)a=a.substring(0,a.indexOf("."));if(a>20)a=a.substring(a.length-19);return a},c="mi"+e(),b=function(b,a){this.g(b,a)};b.prototype={h:function(){var b=new RegExp(c+this.a+"=(\\d+)"),a=document.cookie.match(b);return a?a[1]:this.i()},i:function(){for(var b=0,c=this.b.length;b<c;b++)if(a(this.b[b].parentNode,"selected"))return b;return 0},j:function(b,d){var c=document.getElementById(b.TargetId);if(!c)return;this.l(c);for(var a=0;a<this.b.length;a++)if(this.b[a]==b){j(b.parentNode,"selected");d&&this.d&&this.k(this.a,a)}else h(this.b[a].parentNode,"selected")},k:function(a,b){document.cookie=c+a+"="+b+"; path=/"},l:function(b){for(var a=0;a<this.c.length;a++)this.c[a].style.display=this.c[a].id==b.id?"block":"none"},m:function(){this.c=[];for(var c=this,a=0;a<this.b.length;a++){var b=document.getElementById(this.b[a].TargetId);if(b){this.c.push(b);d(this.b[a],"click",function(b){var a=this;if(a===window)a=window.event.srcElement;c.j(a,1);g(b);return false})}}},g:function(f,h){this.a=h;this.b=[];for(var e=f.getElementsByTagName("a"),i=/#([^?]+)/,a,b,c=0;c<e.length;c++){b=e[c];a=b.getAttribute("href");if(a.indexOf("#")==-1)continue;else{var d=a.match(i);if(d){a=d[1];b.TargetId=a;this.b.push(b)}else continue}}var g=f.getAttribute("data-persist")||"";this.d=g.toLowerCase()=="true"?1:0;this.m();this.n()},n:function(){var a=this.d?parseInt(this.h()):this.i();if(a>=this.b.length)a=0;this.j(this.b[a],0)}};var k=[],i=function(e){var b=false;function a(){if(b)return;b=true;setTimeout(e,4)}if(document.addEventListener)document.addEventListener("DOMContentLoaded",a,false);else if(document.attachEvent){try{var f=window.frameElement!=null}catch(g){}if(document.documentElement.doScroll&&!f){function c(){if(b)return;try{document.documentElement.doScroll("left");a()}catch(d){setTimeout(c,10)}}c()}document.attachEvent("onreadystatechange",function(){document.readyState==="complete"&&a()})}d(window,"load",a)},f=function(){for(var d=document.getElementsByTagName("ul"),c=0,e=d.length;c<e;c++)a(d[c],"tabs")&&k.push(new b(d[c],c))};i(f);return{}})()

[/php]

 

download button

ساخت دکمه دانلود زیبا به صورت اسلایدشو

سلام.امروز در خدمت شما هستم با آموزش ساخت یه دکمه دانلود بسیار زیبا و کاربردی که با جی کوئری ساخته میشه

برای شروع کد زیر رو در تگ <head> قرار بدید

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

 

کدهای استایل رو نیز در فایل Style.css  ذخیره کنید :

.buttonWrap{width:170px; height:80px; display:block;}

.toggleButton{
display:block;
width:170px;
height:30px;
padding:10px 0 0 0;
text-size:24px;
font-family:arial, sans-serif;
font-weight:bold;
text-align:center;
color:#FFF;
text-decoration:none;
border-radius:7px;
cursor:pointer;
border:1px solid #05ABE0;
text-shadow:-1px -1px 0px #05ABE0;
background: #87E0FD;
background: -moz-linear-gradient(top, #87E0FD 0%, #53CBF1 40%, #05ABE0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87E0FD), color-stop(40%,#53CBF1), color-stop(100%,#05ABE0));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87E0FD', endColorstr='#05ABE0',GradientType=0 );
}
.toggleButton:active{
background: #87e0fd;
background: -moz-linear-gradient(top, #05ABE0 0%, #53CBF1 40%, #87E0FD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05ABE0), color-stop(40%,#53CBF1), color-stop(100%,#87E0FD));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05ABE0', endColorstr='#87E0FD',GradientType=0 );
}

a.toggleSection{
display:none;
color:#333;
background:#EEE url(icon-dl.png) no-repeat 5px center;
border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD;
border-radius:0 0 5px 5px;
width:60px;
float:right;
padding:5px 5px 5px 40px;
margin:0 10px 0 0;
font-family:arial, sans-serif;
font-size:12px;
text-decoration:none;
}
a.toggleSection span{font-weight:bold; display:block;}

 

کد جی کوئری دکمه دانلود هم میتونید هرجایی بزارید :

$(document).ready(function() {
$('.buttonWrap').click(function() {
if ($('.toggleSection').is(":hidden")) {
$('.toggleSection').slideDown("slow");
} else {
$('.toggleSection').slideUp("slow");
}
return false;
});
});

 

و در آخر هم کد html دکمه دانلود رو در جایی که میخواید نمایش بده قرار بدید

<div class="buttonWrap">
<div class="toggleButton">Download Now!</div>
<a href="#" class="toggleSection">
<span>Exe</span>
7.27 MB
</a>
</div>

 

امیدوارم خوشتون بیاد
برای دیدن پیش نمایش در زیر کلیک کنید

changing color background effect

افکت زیبای تغییر رنگ بکگراند سایت

یه اسکریپت زیبا برای تغییر رنگ بکگراند سایت به آرامی که باعث زیبا تر شدن فضای سایت میشه
کد افکت :

[php]

<html>
<head>
</head>
<body onload="disco()">
<script language="JavaScript">
<!–
//you can assign the initial color of the background here
r=255;
g=255;
b=255;
flag=0;
t=new Array;
o=new Array;
d=new Array;

function hex(a,c)
{
t[a]=Math.floor(c/16)
o[a]=c%16
switch (t[a])
{
case 10:
t[a]=’A’;
break;
case 11:
t[a]=’B’;
break;
case 12:
t[a]=’C’;
break;
case 13:
t[a]=’D’;
break;
case 14:
t[a]=’E’;
break;
case 15:
t[a]=’F’;
break;
default:
break;
}
switch (o[a])
{
case 10:
o[a]=’A’;
break;
case 11:
o[a]=’B’;
break;
case 12:
o[a]=’C’;
break;
case 13:
o[a]=’D’;
break;
case 14:
o[a]=’E’;
break;
case 15:
o[a]=’F’;
break;
default:
break;
}
}

function ran(a,c)
{
if ((Math.random()>2/3||c==0)&&c<255)
{
c++
d[a]=2;
}
else
{
if ((Math.random()<=1/2||c==255)&&c>0)
{
c–
d[a]=1;
}
else d[a]=0;
}
return c
}
function do_it(a,c)
{
if ((d[a]==2&&c<255)||c==0)
{
c++
d[a]=2
}
else
if ((d[a]==1&&c>0)||c==255)
{
c–;
d[a]=1;
}
if (a==3)
{
if (d[1]==0&&d[2]==0&&d[3]==0)
flag=1
}
return c
}
function disco()
{
if (flag==0)
{
r=ran(1, r);
g=ran(2, g);
b=ran(3, b);
hex(1,r)
hex(2,g)
hex(3,b)
document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag=50
}
else
{
r=do_it(1, r)
g=do_it(2,g)
b=do_it(3,b)
hex(1,r)
hex(2,g)
hex(3,b)
document.body.style.background="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag–
}

setTimeout(‘disco()’,50)
}
//–>
</script>

</body>
</html>
[/php]

bubble effect

افکت حباب

این افکت زیبا باعث میشه که صفحه سایت شما رو پر از حباب های آب بکنه و سایت شما شبیه یک آکواریوم بشه.

برای استفاده از این افکت زیبا از کد زیر استفاده کنید :

[php]

<html>
<head>
</head>
<body>
<script language="JavaScript1.2">

var no = 15; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "http://www.htmlbestcodes.com/images/bubble.gif"
snow[1] = "http://www.htmlbestcodes.com/images/bubble.gif"
snow[2] = "http://www.htmlbestcodes.com/images/bubble.gif"

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End –>
</script>

</body>
</html>

[/php]

jquery css

ساخت کنترل دستگیره براق توسط jquery و css

همونطور که در عکس و پیش نمایش می بینید شما با این فایل که لینک دانلودش رو براتون آماده کردم میتونید یه دستگیره زیبا بسازید و در سایت تون استفاده کنید

من کدهایی که لازم هست رو در اینجا براتون میزارم و بقیه کدها رو میتونید از فایل ضمیمه شده بردارید

کد html

[php]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Shiny Switches with CSS3 &amp; jQuery | Tutorialzine Demo</title>

<!– CSS stylesheets –>
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/knobKnob/knobKnob.css" />

<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
</head>

<body>

<section id="main">

<div id="bars">
<div id="control">
<!– The knob markup will go here –>
</div>
<!– The colorful dividers will go here –>
</div>

</section>

<!– JavaScript includes –>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/knobKnob/transform.js"></script>
<script src="assets/knobKnob/knobKnob.jquery.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

[/php]

کد جی کوئری :

[php]

(function($){

$.fn.knobKnob = function(props){

var options = $.extend({
snap: 0,
value: 0,
turn: function(){}
}, props || {});

var tpl = ‘<div class="knob">\
<div class="top"></div>\
<div class="base"></div>\
</div>’;

return this.each(function(){

var el = $(this);
el.append(tpl);

var knob = $(‘.knob’,el)
knobTop = knob.find(‘.top’),
startDeg = -1,
currentDeg = 0,
rotation = 0,
lastDeg = 0,
doc = $(document);

if(options.value > 0 && options.value <= 359){
rotation = currentDeg = options.value;
knobTop.css(‘transform’,’rotate(‘+(currentDeg)+’deg)’);
options.turn(currentDeg/359);
}

knob.on(‘mousedown’, function(e){

e.preventDefault();

var offset = knob.offset();
var center = {
y : offset.top + knob.height()/2,
x: offset.left + knob.width()/2
};

var a, b, deg, tmp,
rad2deg = 180/Math.PI;

knob.on(‘mousemove.rem’,function(e){

a = center.y – e.pageY;
b = center.x – e.pageX;
deg = Math.atan2(a,b)*rad2deg;

// we have to make sure that negative
// angles are turned into positive:
if(deg<0){
deg = 360 + deg;
}

// Save the starting position of the drag
if(startDeg == -1){
startDeg = deg;
}

// Calculating the current rotation
tmp = Math.floor((deg-startDeg) + rotation);

// Making sure the current rotation
// stays between 0 and 359
if(tmp < 0){
tmp = 360 + tmp;
}
else if(tmp > 359){
tmp = tmp % 360;
}

// Snapping in the off position:
if(options.snap && tmp < options.snap){
tmp = 0;
}

// This would suggest we are at an end position;
// we need to block further rotation.
if(Math.abs(tmp – lastDeg) > 180){
return false;
}

currentDeg = tmp;
lastDeg = tmp;

knobTop.css(‘transform’,’rotate(‘+(currentDeg)+’deg)’);
options.turn(currentDeg/359);
});

doc.on(‘mouseup.rem’,function(){
knob.off(‘.rem’);
doc.off(‘.rem’);

// Saving the current rotation
rotation = currentDeg;

// Marking the starting degree as invalid
startDeg = -1;
});

});
});
};

})(jQuery);

[/php]

1379859030

ساخت تب توسط css و jquery

امروز میخوام بهتون قرار دادن تب در سایت رو آموزش بدم.همونطور که میدونید تب های جز پرکاربرد ترین بخش های یه سایت هستند و در بسیاری از سایت های حرفه ای استفاده میشن شما هم بهتره از این نوع تکنولوژی در سایت هاتون استفاده کنید

فایل اسکریپت آماده دانلود هستش و شما می تونید دانلود کنید و از کدهاش استفاده کنید و من در زیر قسمتی از کد هارو براتون میزارم تا کمی راهنمایی بشید

کد html :

<ul class="tabs">
<li><input id="tab1" checked="checked" name="tabs" type="radio" />
<label for="tab1">tab 1</label></li>
</ul>
<div id="tab-content1" class="tab-content animated fadeIn">...</div>
<ul>
<li><input id="tab2" name="tabs" type="radio" />
<label for="tab2">tab 2</label>
<div id="tab-content2" class="tab-content animated fadeIn">...</div></li>
<li><input id="tab3" name="tabs" type="radio" />
<label for="tab3">tab 3</label>
<div id="tab-content3" class="tab-content animated fadeIn">...</div></li>
</ul>

کد css :

body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}

.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Lily Script One', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}

[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}

[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: #08C;
padding: 15px;
color: white;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}