ساخت یک تصویر شناور با استفاده از CSS3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

انیمیشنوقتی ماوس را بر روی یک لینک یا تصویر قرار میدهید و رنگ یا افکت خاصی بر روی آن اعمال می شود ، از خصوصیت hover استفاده شده است . اما Css3 ویژگی hover را تکمیل کرده است . شما می توانید دو تصویر را انتخاب کنید و با مدت زمان خاص مشخص کنید وقتی موس بر روی یک تصویر قرار می گیرد تصویر دوم به چه حالتی ظاهر شود . برای استفاده از این ویژگی از یکسری تگهای کاربرد استفاده شده است که در ادامه آموزش میدهم .(مشاهده دمو در مرورگر)

روش کار بسیار ساده می باشد . ابتدا از طریق یک دیویژن به هر دو تصویر در صفحه یا پوشه لینک میدهیم .
سپس مشخص می کنیم که تصویر با چه عرض و ارتفاعی در صفحه قرار بگیرید .
در مرحله بعدی با استفاده از خصوصیت transition به صور تدریجی حالت تصویر را به حالت دیگر تغییر میدهم.
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
اپرا برای این ویژگی نیاز به پیشوند -o- دارد .

 1. ابتدا کدهای تشکیل دهنده یک صفحه HTML را در یک فایل نوت پد یا هر ویرایشگر دیگر با پسوند html. ذخیره میکنم . مثلا index.html

<!DOCTYPE html>
<html>
    <head>
    </head>
              <body>
              </body>
</html>

2. سپس یک استایل ایجاد میکنم و در تگ مربوطه خصوصیت هایی که در بالا توضیح داده ام را در آن تایپ میکنم . 

 

<style>
#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
  opacity:0;
}
</style>

 

حالا کد مربوط به لینک تصویر را در بین تگ body تایپ کرده و فایل را با عنوان index.html ذخیره میکنم .

 

 <!DOCTYPE html>
<html>
<head>
<style>
#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
  opacity:0;
}
</style>
</head>
<body>
<div id="cf">
  <img class="bottom" src="/Logo.jpg" />
  <img class="top" src="/Turtle.jpg" />
</div>
</body>
</html>

 (مشاهده دمو در مرورگر)

 انیمیشن

رسانه

آخرین بروز رسانیپنج شنبه, 08 مرداد 1394 12:19

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #1 محسن 1397-01-30 11:47
سلام/بسیار ممنونم
دوست عزیز ممکن نحوه جایگذاری به من بگید من خیلی حرفه ای نیستم و نمیدونماین کد کجا باید کپی بشه که جواب بده
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»