تغییر رنگ با 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 خواهیم پرداخت .
منبع : هنرتک