下载代码

html

css

js

分享到微信朋友圈

X

html

CSS Animation is

awesome.

beautiful.

creative.

fabulous.

interesting.

css

@import url(https://fonts.googleapis.com/css?family=Lato:600);

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: #222;

}

.rotating-text {

font-family: Lato, sans-serif;

font-weight: 600;

font-size: 36px;

color: white;

transform: translateX(-80px);

}

.rotating-text p {

display: inline-flex;

margin: 0;

vertical-align: top;

}

.rotating-text p .word {

position: absolute;

display: flex;

opacity: 0;

}

.rotating-text p .word .letter {

transform-origin: center center 25px;

}

.rotating-text p .word .letter.out {

transform: rotateX(90deg);

transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);

}

.rotating-text p .word .letter.in {

transition: 0.38s ease;

}

.rotating-text p .word .letter.behind {

transform: rotateX(-90deg);

}

.alizarin {

color: #e74c3c;

}

.wisteria {

color: #8e44ad;

}

.peter-river {

color: #3498db;

}

.emerald {

color: #2ecc71;

}

.sun-flower {

color: #f1c40f;

}

JavaScript

var words = document.querySelectorAll(".word");

words.forEach(function (word) {

var letters = word.textContent.split("");

word.textContent = "";

letters.forEach(function (letter) {

var span = document.createElement("span");

span.textContent = letter;

span.className = "letter";

word.append(span);

});

});

var currentWordIndex = 0;

var maxWordIndex = words.length - 1;

words[currentWordIndex].style.opacity = "1";

var rotateText = function () {

var currentWord = words[currentWordIndex];

var nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];

// rotate out letters of current word

Array.from(currentWord.children).forEach(function (letter, i) {

setTimeout(function () {

letter.className = "letter out";

}, i * 80);

});

// reveal and rotate in letters of next word

nextWord.style.opacity = "1";

Array.from(nextWord.children).forEach(function (letter, i) {

letter.className = "letter behind";

setTimeout(function () {

letter.className = "letter in";

}, 340 + i * 80);

});

currentWordIndex =

currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;

};

rotateText();

setInterval(rotateText, 4000);