رفتن به مطلب

ساخت باکس متحرک با css3


پست های پیشنهاد شده

کد های css زیر را به استایل مورد نظر اضافه کنید:


.anime {
width:100px;
height:100px;
background:red;
position:relative;
animation:boxmove 5s linear;
-moz-animation:boxmove 5s infinite; /*Firefox*/
-webkit-animation:boxmove 5s infinite; /*Safari and Chrome*/
}
@keyframes boxmove
{
from {right:0px;}
to {right:200px;}
}
@-moz-keyframes boxmove /*Firefox*/
{
from {right:0px;}
to {right:200px;}
}
@-webkit-keyframes boxmove /*Safari and Chrome*/
{
from {right:0px;}
to {right:200px;}
}

و با استفاده از کد زیر آن را فراخوانی کنید:


<div class="anime"></div>

پیش نمایش:


http://rango.ir/demo/css3anim/

لینک به ارسال

متن موردنظر را بین div ها قرار دهید:


<div class="anime">متن</div>

برای سرعت هم مقدارهای 5s را تغییر دهید:


animation:boxmove 5s linear;
-moz-animation:boxmove 5s infinite; /*Firefox*/
-webkit-animation:boxmove 5s infinite; /*Safari and Chrome*/

لینک به ارسال

حالا اگر اون فلش را بخواهم کدش چیه ؟

كلاسش كه مشخص هست ، فقط بايد به جاي متن ، كد فايل فلشتون رو قرار بديد ، يا عكس يا هر چيز ديگه ..

كد فلش :

اينجا رو ببينيد ،

موفق باشيد ../.

لینک به ارسال

پس لطفا توي يك تاپيك بحث رو ادامه بديد و گفته‌ها پراكنده نشه ..

ادامه‌ي بحث در اين مورد توي همون تاپيكي كه خودتون لينك داديد ..

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...