سلام دوستان. امروز میخوام چند افکت زیبا و ساده برای هاور آیکن را معرفی کنم. در آموزش ساخت افکت هاور آیکن ، ما از CSS transition و انیمیشن استفاده کرده ایم.

دانلود سورسمشاهده دمو

همچنین برای آیکن ها، از فونت آیکن های Icomoon استفاده کرده ایم. شما می تونید از فونت آیکن های دیگه مثل FontAwesome استفاده کنید.

نکته: این افکت ها تنها در مرورگر هایی که از کدهای CSS3 پشتیبانی می کنند، اجرا می شوند.

ساخت افکت هاور آیکن

برای شروع، کد زیر را داخل یک فایل html قرار دهید:

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
	<a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
	<a href="#" class="hi-icon hi-icon-screen">Desktop</a>
	<a href="#" class="hi-icon hi-icon-earth">Partners</a>
	<a href="#" class="hi-icon hi-icon-support">Support</a>
	<a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

و سپس کد زیر را داخل یک فایل css قرار دهید و این فایل css را در داخل فایل html، فراخوان کنید:

.hi-icon-effect-6 .hi-icon {
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
	transition: background 0.2s, color 0.2s;	
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
	animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}

نکته: Border خطی (dashed) با border-radius:50% در مرورگر FF 21.0 اجرا نمی شود (افکت 4)

در نهایت آیکن های شما افکت های متنوع و زیبا مشابه تصویر زیر خواهند داشت :

ساخت افکت هاور آیکن

 

امیدوارم که از مقاله ساخت افکت هاور آیکن لذت برده باشید، می توانید از بخش UI/UX مطالب مشابه به مقاله بالا را دنبال کنید .

در صورت وجود هر گونه سوال و یا مشکل در مقاله از طریق بخش نظرات با ما در ارتباط باشید.

دانلود سورسمشاهده دمو

کلمات کلیدی: ، ،

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --