纯CSS响应文本效果

本文介绍了纯CSS响应文本效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的问题很简单.考虑以下 CodePen .是否有可能仅使用CSS就能获得相同的结果?换句话说，不使用javascrip怎么办?非常感谢！

my question is very simple. Consider the following CodePen. Is it possible I can get the same result just using css? in other words, how would this be done without using javascrip? Many Thanks!

<div class="text"> <p>Nachos are</p> <p> <span class="word wisteria">tasty.</span> <span class="word belize">wonderful.</span> <span class="word pomegranate">fancy.</span> <span class="word green">beautiful.</span> <span class="word midnight">cheap.</span> </p> </div> @import url(fonts.googleapis/css?family=Open+Sans:600); body { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 40px; } .text { position: absolute; width: 450px; left: 50%; margin-left: -225px; height: 40px; top: 50%; margin-top: -20px; } p { display: inline-block; vertical-align: top; margin: 0; } .word { position: absolute; width: 220px; opacity: 0; } .letter { display: inline-block; position: relative; float: left; transform: translateZ(25px); transform-origin: 50% 50% 25px; } .letter.out { transform: rotateX(90deg); transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .letter.behind { transform: rotateX(-90deg); } .letter.in { transform: rotateX(0deg); transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .wisteria { color: #8e44ad; } .belize { color: #2980b9; } .pomegranate { color: #c0392b; } .green { color: #16a085; } .midnight { color: #2c3e50; } var words = document.getElementsByClassName('word'); var wordArray = []; var currentWord = 0; words[currentWord].style.opacity = 1; for (var i = 0; i < words.length; i++) { splitLetters(words[i]); } function changeWord() { var cw = wordArray[currentWord]; var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1]; for (var i = 0; i < cw.length; i++) { animateLetterOut(cw, i); } for (var i = 0; i < nw.length; i++) { nw[i].className = 'letter behind'; nw[0].parentElement.style.opacity = 1; animateLetterIn(nw, i); } currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1; } function animateLetterOut(cw, i) { setTimeout(function() { cw[i].className = 'letter out'; }, i*80); } function animateLetterIn(nw, i) { setTimeout(function() { nw[i].className = 'letter in'; }, 340+(i*80)); } function splitLetters(word) { var content = word.innerHTML; word.innerHTML = ''; var letters = []; for (var i = 0; i < content.length; i++) { var letter = document.createElement('span'); letter.className = 'letter'; letter.innerHTML = content.charAt(i); word.appendChild(letter); letters.push(letter); } wordArray.push(letters); } changeWord(); setInterval(changeWord, 4000);

推荐答案

是.基本上可以！

但是，要计算每个该死的字母的动画确实是非常艰苦的工作……但是我不确定是否还有一些动画工作室正在处理此类事情……

Yes. Basically that is possible!

But indeed it is really hard work to calculate the animation to every damned letter ... but I am not quite sure if there are not still some animations studios who are playing arround with such things ...

因此，如果您想精确那样做(=带有字母动画)，则我想使用非常漂亮的JS代码段(在此处显示该代码).

So, if you want to exactly like do that (= with letter animating) I would prefer to use the really nice JS snippet (thx for showing that here).

但是，如果您不能够/不愿意在项目中使用JS，并且想要执行某些操作，那么您可以使用 @keyframes在CSS中轻松实现COMPLETE WORD CHANGING动画.

But if you are however not able/willing to use JS in your project and you would like to do SOMETHING like that you can realize a COMPLETE WORD CHANGING easily in CSS using @keyframes animations.

请参见下面的一个简短而肮脏的示例说明.

See a quick and dirty example for expalanation below.

注意:动画非常简单！当然，您可以使用旋转，背景等方式来做一些更酷的效果.如果您只想根据自己的想象调整示例:-)

Note: The animation is really simple! Of course you can do much cooler effects using rotations, backgrounds, etc. If you like just adapt example to your imaginations :-)

* { -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-family: sans-serif; } .text { position: relative; margin: 20px; font-size: 1.5rem; line-height: 1.2em; } .wordChange__wrapper { display: relative; } .wordChange__changer { display: inline-block; position: absolute; top: -100%; width: 220px; opacity: 0; -webkit-animation: wordchanger; animation: wordchanger; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .wordChange__element_1 { -webkit-animation-delay: 0s; animation-delay: 0s; } .wordChange__element_2 { -webkit-animation-delay: 2s; animation-delay: 2s; } .wordChange__element_3 { -webkit-animation-delay: 4s; animation-delay: 4s; } .wordChange__element_4 { -webkit-animation-delay: 6s; animation-delay: 6s; } .wordChange__element_5 { -webkit-animation-delay: 8s; animation-delay: 8s; } @-webkit-keyframes wordchanger { 0% { top: -100%; opacity: 0; } 4.5% { opacity: 0; } 9% { top: 0; opacity: 1; } 20% { top: 0; opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 24.5% { opacity: 0; } 29% { top: 100%; opacity: 0; } } @keyframes wordchanger { 0% { top: -100%; opacity: 0; } 4.5% { opacity: 0; } 9% { top: 0; opacity: 1; } 20% { top: 0; opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 24.5% { opacity: 0; } 29% { top: 100%; opacity: 0; } } .wisteria { color: #8e44ad; } .belize { color: #2980b9; } .pomegranate { color: #c0392b; } .green { color: #16a085; } .midnight { color: #2c3e50; }

<div class="text"> <p class="wordChange__wrapper">Nachos are&nbsp; <span class="wordChange__changer wordChange__element_1 wisteria">tasty.</span> <span class="wordChange__changer wordChange__element_2 belize">wonderful.</span> <span class="wordChange__changer wordChange__element_3 pomegranate">fancy.</span> <span class="wordChange__changer wordChange__element_4 green">beautiful.</span> <span class="wordChange__changer wordChange__element_5 midnight">cheap.</span> </p> </div>