تغییر رنگ با css3

در این آموزش یاد میگیریم که چگونه با استفاده چند خط کد css تغییر رنگ ایجاد کنیم و افکت های زیبا به وجود بیاوریم. بدون تلف کردن وقت برویم به سراغ آموزش : تغییر رنگ با css3

برای این کار ابتدا باید کدهای HTML را مشخص کنیم . کد html ما بصورت زیر خواهد بود :

کد html :

<a id="colory-bg" href="http://honartech.ir">هنرتک</a>

یک تگ a برای لینک به همراه کلمه یا موارد مورد نظر در داخل آن.
حالا با استفاده از css به استایلدهی می پردازیم.

کد css : 

 

p{
  	margin: 50px;
}

a#colory-bg{ 
	background-color: #bd8cbf;
	color: #fff;
  	font-weight: bold;
  	text-decoration: none;
	padding: 20px 10px;
  	border-radius: 50%;
	animation-name: coloryBg; 
	animation-duration:10s; 
	animation-direction:alternate; 
	animation-iteration-count:infinite; 

	-webkit-animation-name: coloryBg; 
	-webkit-animation-duration:10s; 
	-webkit-animation-direction:alternate; 
	-webkit-animation-iteration-count:infinite; 
}

@keyframes coloryBg {
  	۰% {background-color:#8c97bf;} 
  	۲۵% {background-color:#78d3ed;} 
  	۵۰% {background-color:#5cc572;} 
  	۷۵% {background-color:#ecbb51;} 
} 

@-webkit-keyframes coloryBg { 
  	۰% {background-color:#8c97bf;} 
  	۲۵% {background-color:#78d3ed;} 
  	۵۰% {background-color:#5cc572;} 
  	۷۵% {background-color:#ecbb51;} 
}

در کدهای بالا با استفاده از  background-color رنگ پس زمینه ابتدایی را مشخص کردیم ،
با استفاده از animation-name یک نام برای این انیمیشن انتخاب کردیم (coloryBg) ،
با استفاده از خصوصیت animation-duration زمان یک دور انیمیشن را مشخص کردیم (۱۰ ثانیه) ،
با استفاده از animation-direction تعین کردیم که پس از یک دور کامل از انیمیشن مسیری که طی شده به عقب برگردد،
با استفاده از animation-iteration-count مشخص کردیم که انیمیشن ادامه دار و بی پایان باشد ،
و در نهایت با استفاده از keyframe ها تعیین کردیم که در هر مقطع زمانی از انیمیشن چه رنگی به پس زمینه اعمال شود.

نتیجه کار بصورت زیر خواهد بود :

See the Pen example by Honartech (@Morteza930) on CodePen.0

با استفاده از css3 و بدون نیاز به jQuery و javascript می توان افکت های متنوعی به وجود آورد و به زیبایی سایت افزود. البته همیشه باید حد اعتدال را در نظر بگیرید و در استفاده از این افکت ها زیاده روی نکنید تا تاثیر منفی از آن دریافت نکنید. در آموزش های بعدی به موارد بیشتری از انیمیشن و ترنزیشن با استفاده از css3 خواهیم پرداخت .

منبع : هنرتک