حامد آقاقلیزاده معز : وب مهراز - جامعه برنامه نویسی ایران

امکان چرخاندن تک تک حروف یک جمله یا تیتر در صفحه

آیا با زبان های کد نویسی میشه تک تک حروف یک جمله یا تیتر رو انیمیشن داد و اونها رو چرخوند؟

پاســخ ها

0000000000000000000000000000001
علیرضا احمدی بابلانی : برای این کار فقط  و فقط یک روش وجود داره ، فرض کن   می خوای     کلمه webmehraz  رو تک تک حروفاتش رو به چرخش در بیاری :
<div>
     webmehraz
</div>
برای اینکار تک تک کاراکتر ها رو باید تو span قرار بدین :

<div>
     <span>w</span><span>e</span><span>b</span><span>m</span><span>e</span><span>h</span><span>r</span><span>a</span><span>z</span>
</div>
حالا یک انمیشن در css میتونه کار رو تموم کنه :

div
{
   position:relative;
}
span
{
    animation:infinite 2s keyframeanimation;
}
@keyframes keyframeanimation
{
     0%
     {
           transform:rotate(0);
     }

     100%
     {
           transform:rotate(360deg);
     }
}


با کد های بالا هر 2 ثانیه یک بار حروفات کلمه webmehraz شروع به چرخش خواهند کرد.
کد های بالا در chrome و firefox , opera  هم توسعه دهید:

div
{
   position:relative;
}
span
{
    animation:infinite 2s keyframeanimation;
    -o-animation:infinite 2s keyframeanimation;
    -moz-animation:infinite 2s keyframeanimation;
    -webkit-animation:infinite 2s keyframeanimation;
}
@keyframes keyframeanimation
{
     0%
     {
           transform:rotate(0);
     }

     100%
     {
           transform:rotate(360deg);
     }
}
@-o-keyframes keyframeanimation
{
     0%
     {
           -o-transform:rotate(0);
     }

     100%
     {
           -o-transform:rotate(360deg);
     }
}
@-moz-keyframes keyframeanimation
{
     0%
     {
           -moz-transform:rotate(0);
     }

     100%
     {
           -moz-transform:rotate(360deg);
     }
}
@-webkit-keyframes keyframeanimation
{
     0%
     {
           -webkit-transform:rotate(0);
     }

     100%
     {
           -webkit-transform:rotate(360deg);
     }
}

یکشنبه 24 اسفند 1393 ساعت : 29 : 13
تعداد بازدید : 380
ارسال به دوستان

ارسال