oMid

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

7 پست در این موضوع قرار دارد

کد های 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/

5

به اشتراک گذاری این پست


لینک به پست

حالا چجوری توش مطلب بزارم ؟ و چجوری سرعتش کم میشه

0

به اشتراک گذاری این پست


لینک به پست

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


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

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


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

3

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

كد فلش :

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

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

2

به اشتراک گذاری این پست


لینک به پست

منظورم این تصویری هست که توی تایپیک زیر گفتم

0

به اشتراک گذاری این پست


لینک به پست

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

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

2

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

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

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری