آموزش ساخت افکت انیمیشنی شناور در css

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

گام اول:استفاده از تصویر

ما از یک عکس متشکل از 2 تصویر مجزا استفاده میکنیم،که قسمت بالایی آن در حالت عادی در صفحه نمایش داده میشود و قسمت پایینی آن وقتی نمایش داده میشود که نشان گر موس را روی عکس مورد نظر قرار میدهیم،ما برای این کار از عکس زیر استفاده کرده ایم:

گام دوم:ساخت فایل css

یک فولدر(پوشه) در سیستمتان ایجاد کنید و نامی را برای آن در نظر بگیرید.بعد وارد پوشه شوید و فایلی با پسوند .css بسازید.برای ساخت این فایل میتوانید از نرم افزار notepad ++ یا notepad ویندوزتان استفاده کنید،برای ساخت این فایل در برنامه notepad کافیست در آخر اسم فایل مورد نظر .css اضافه کنید تا فایل سی اس اس ایجاد شود.بعد اسم آن را به 1 تغییر دهید.(1.css) خب حالا فایل ساخته شده را باز کنید و کد زیر را در آن قرارداده و آن را ذخیره کنید:

#twitter { }

a#twitter{
width:58px;
height:58px;
display:block;
background:url("icon.png") no-repeat;
background-position:0 0;
-webkit-transition-property:background-position;
-moz-transition-property:background-position;
-o-transition-property:background-position;
transition-property:background-position;
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
a#twitter:hover{
background:url("icon.png") 100% 0 no-repeat;
background-position:0 100%
}

گام سوم:ایجاد فایل html ودیدن نتیجه کار

مراحل بالا را برای ساخت فایل طی کنید ولی این بار به جای گذاشتن .css در آخر نام فایل،از .html برای ایجاد فایلی با پسوند اچ تی ام ال بهره ببرید.حال فایل ساخته شده را باز کرده و کد زیر را در آن قرار داده و آن را ذخیره کنید.

<link rel="stylesheet" href="1.css">
<a id ="twitter" href="https://twitter.com"></a>

تا حالا دو فایل اچ تی ام ال و سی اس اس مورد نظر را ساختیم.در این لحظه باید عکسی که در گام اول آموزش برای شما به نمایش در آمد را در پوشه ای که ساختید ذخیره کنید.

حال با اجرای فایل html که ساخته بودید باید نتیجه ای همانند تصویر متحرک زیر داشته باشید، که وقتی نشانگر موس را روی عکس ببرید، عکس به این صورت تعویض شود.

نکته 1:اگر میخواهید از این جلوه مستقیما در وبسایتتان استفاده کنید،میتوانید کد css این آموزش را در فایل کدهای css قالبتان کپی کنید و کد html را هم در قسمتی مناسب در قالبتان قرار دهید.

نکته 2:اگر میخواهید کد را مستقیما در قالب وبسایتتان به کار ببرید،و کد css را در قسمت کد های قالبتان کپی کرده اید،این قسمت آن را حذف کنید:

<link rel="stylesheet" href="1.css">

اگر نتوانستید به نتیجه کار برسید و اگر سوالی در مورد این آموزش دارید،لطفا از طریق قسمت نظرات،پرسشتان را مطرح کنید

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

دانلود