• loading زیبا برای استفاده در طراحی ها
    #1
    Note 
    HTML
    [HTML]<h1 class="no-transition"> <span>L</span> <span>o</span> <span>a</span> <span>d</span> <span>i</span> <span>n</span> <span>g</span></h1>[/HTML]

    CSS
    [CSS]
    /* The hover effect */

    span {
    transform-origin: 50% 50% 80px;
    transform: rotateX(0deg);
    position: absolute;
    width: 20px;
    }


    h1.no-transition span {
    transition: all 0s !important;
    transform: rotateX(0deg) !important;
    }


    @for $i from 1 through 7 {
    span:nth-child(#{$i}) {
    transition: all 0.7s ease + ' ' + $i /8 + s;
    left: $i * 31 + px;
    }
    }


    h1:hover span {
    transform: rotateX(360deg);
    color: deeppink;
    }


    /* Beautifications */


    html {
    height: 100%;
    }


    body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Monaco, Consolas, "Lucida Console", monospace;
    font-smoothing: antialiased;
    perspective: 700px;
    transform-style: preserve-3d;

    background-color: #ffffff;
    @include filter-gradient(#ffffff, #eae0de, horizontal);
    @include background-image(radial-gradient(center, ellipse cover, #ffffff 0%,#eae0de 100%));
    }


    h1 {
    position: relative;
    margin-top: -40px;
    top: 50%;
    width: 260px;
    height: 55px;
    margin-left: -130px;
    cursor: pointer;
    left: 50%;
    font-size: 47px;
    color: #556270;
    }


    .transition span{
    transform: rotateX(360deg);

    }[/CSS]


    JAVASCRIPT


    [JS]var container = document.querySelector( 'h1' );var palette = [ '#4ECDC4', '#A9CF54', '#FF6B6B', '#556270']
    var paletteIndex = 0;


    setInterval( function() {

    // Reset spans rotation without transitions
    container.className = 'no-transition';

    // Debounce change to allow for css changes
    setTimeout( function() {
    container.style.color = palette[paletteIndex];
    container.className = 'transition';
    paletteIndex += 1;
    paletteIndex %= palette.length;
    }, 10 );


    }, 2500 );[/JS]

    دمو: Animated Type Loader - CodePen

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    موضوعات مرتبط با این موضوع...
    موضوع نویسنده پاسخ بازدید آخرین ارسال
      استفاده از تگ @media souda 3 1,521 02-08-2015 ساعت 18:13
    آخرین ارسال: C0der
    Note سوال جدا بودن المنت از والد وقتی از absolute استفاده میکنیم mahbobe.prog 3 1,010 04-02-2015 ساعت 22:16
    آخرین ارسال: C0der
    Note منوی دایره ای بسیار زیبا با CSS Daniel 0 1,773 01-02-2015 ساعت 16:21
    آخرین ارسال: Daniel
    Note دوره آموزشی طراحی قالب با استفاده از Bootstrap rockstar 5 2,944 23-10-2014 ساعت 17:08
    آخرین ارسال: rockstar
    Note چطور مستقیما قسمتی از سایت را لینک کنیم؟ TroFun 2 689 10-09-2014 ساعت 22:35
    آخرین ارسال: rockstar
    Note اسکریپت اسلایدر زیبا و متفاوت Ali Developer 0 561 12-05-2014 ساعت 15:53
    آخرین ارسال: Ali Developer
    Note قالب زیبا و حرفه ای ProBlogger برای رزبلاگ - قالب رزبلاگ THE KNIGHT 2 1,044 10-12-2013 ساعت 14:21
    آخرین ارسال: Mohammad mahdi
    Note صفحه لاگین زیبا (SA Login) SOFTAFZAR 2 1,295 03-11-2013 ساعت 14:50
    آخرین ارسال: Persiantools
    Note فایرباگ را در همه مرورگرها استفاده کنید! C0der 1 660 05-09-2013 ساعت 08:19
    آخرین ارسال: Daniel
    Note چند تصویر Loading AnimeIraN 1 577 07-08-2013 ساعت 15:51
    آخرین ارسال: AnimeIraN

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان