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 835 02-08-2015 ساعت 18:13
آخرین ارسال: C0der
Note سوال جدا بودن المنت از والد وقتی از absolute استفاده میکنیم mahbobe.prog 3 872 04-02-2015 ساعت 22:16
آخرین ارسال: C0der
Note منوی دایره ای بسیار زیبا با CSS Daniel 0 1,111 01-02-2015 ساعت 16:21
آخرین ارسال: Daniel
Note دوره آموزشی طراحی قالب با استفاده از Bootstrap rockstar 5 2,473 23-10-2014 ساعت 17:08
آخرین ارسال: rockstar
Note چطور مستقیما قسمتی از سایت را لینک کنیم؟ TroFun 2 563 10-09-2014 ساعت 22:35
آخرین ارسال: rockstar
Note اسکریپت اسلایدر زیبا و متفاوت Ali Developer 0 479 12-05-2014 ساعت 15:53
آخرین ارسال: Ali Developer
Note قالب زیبا و حرفه ای ProBlogger برای رزبلاگ - قالب رزبلاگ THE KNIGHT 2 934 10-12-2013 ساعت 14:21
آخرین ارسال: Mohammad mahdi
Note صفحه لاگین زیبا (SA Login) SOFTAFZAR 2 856 03-11-2013 ساعت 14:50
آخرین ارسال: Persiantools
Note فایرباگ را در همه مرورگرها استفاده کنید! C0der 1 488 05-09-2013 ساعت 08:19
آخرین ارسال: Daniel
Note چند تصویر Loading AnimeIraN 1 477 07-08-2013 ساعت 15:51
آخرین ارسال: AnimeIraN

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