ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 08 مرداد, 1394 4603 0

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

انیمیشنوقتی ماوس را بر روی یک لینک یا تصویر قرار میدهید و رنگ یا افکت خاصی بر روی آن اعمال می شود ، از خصوصیت 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>

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

 انیمیشن

این مورد را ارزیابی کنید
(6 رای‌ها)
آخرین ویرایش در پنج شنبه, 08 مرداد 1394 ساعت 12:19
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا