文字从中间向两边延展
<p class="reveal">纯css由中间向两边延展</p>
css:
body{ display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #222; } .reveal{ position: relative; display: flex; color: #6ee1f5; font-size: 2em; font-family: Raleway, sans-serif; letter-spacing: 3px; /*text-transform: uppercase;*/ /*white-space: pre;*/ } span{ opacity: 0; transform: scale(0); animation: fadeIn 2.4s forwards; } .reveal::before,.reveal::after{ position: absolute; content: ""; top: 0; bottom: 0; width: 2px; height: 100%; background: white; opacity: 0; transform: scale(0); } .reveal::before{ left: 50%; animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards; } .reveal::after{ right: 50%; animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards; } @keyframes fadeIn { to { opacity: 1; transform: scale(1); } } @keyframes slideLeft { to { left: -6%; opacity: 1; transform: scale(0.9); } } @keyframes slideRight { to { right: -6%; opacity: 1; transform: scale(0.9); } }
js:
var duration = 0.8; var delay = 0.3; var revealText = document.querySelector(".reveal"); var letters = revealText.textContent.split(""); revealText.textContent = ""; // 清空文本节点 // var middle = letters.filter(e => e !== " ").length / 2 var middle = letters.length/2; letters.forEach((letter, i) => { var span = document.createElement("span"); span.textContent = letter; span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`; revealText.append(span) })