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>
**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);
}**
JAVASCRIPT
**
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 );
[color=#ff0000]دمو:[/color] Animated Type Loader - CodePen