سلام برنامه | HiProgram

سلام دوستان عزیز سلام برنامه با آموزش تصویری ساخت بکگراند متحرک با css در همراه شماست

آموزش تصویری ساخت بکگراند متحرک با css یکی از عوامل مهم در جذب کاربر برای سایت می باشد.

در آموزش امروز با خاصیت animation در css3 آشنا شده و یک بکگراند زیبا می سازیم.

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

برای ساخت این بکگراند لازم است که کد های css زیر را به بکگراند سایت خود بدهید.

کد های css:

#myDIV{
	width:300px;
	height:200px;
	background:red;
	-webkit-animation:mymove 5s infinite;
	animation:mymove 5s infinite
	}
	
@-webkit-keyframes mymove{
	from {background-color:red;}
	to {background-color:blue;}
}
@keyframes mymove{
	from {background-color:red;}
	to {background-color:blue;}
}

در کد های بالا با دستور keyframes شما یک انیمیشن ایجاد می کنید.

توجه داشته باشید برای آنکه انیمیشن اجرا شود باید کد animation: mymove 5s را در جایی که می خواهید اجرا شود بنویسید.

نکته مهم این است که انیمیشن ها برای آنکه بتوانند در تمام مرورگر ها اجرا شوند نیاز به پسوند های هر مرورگر دارند.

برای مثال مرورگر فایرفاکس با پسوند -moz- کار می کند و کروم و سافری با -webkit- که در کد بالا موجود است.

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