改变 h1 的宽度

Question

我在下面有这段代码，可以让文本很好地淡入。 但是，正如您在下面运行它时所看到的，它没有显示在 h1.h 中指定的整个文本。 所以我对如何解决这个问题有点困惑，因为查看 css，它没有指定 div 或 h1 的宽度实际上在哪里。

 var spanText = function spanText(text) { var string = text.innerText; var spaned = ''; for (var i = 0; i < string.length; i++) { if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1); else spaned += '<span>' + string.substring(i, i + 1) + '</span>'; } text.innerHTML = spaned; } var headline = document.querySelector("h1"); spanText(headline);

 @import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap'); body { margin: 0; padding: 0; }.container { display: flex; justify-content: center; align-items: center; font-family: 'Oswald', helvetica; background-color: #333; color: #fff; height: 100vh; font-size: 30px; }.container h1 span { letter-spacing: 3px; font-weight: 300; display: inline-block; opacity: 0; text-transform: uppercase; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; transition-timing-function: ease-out; }.container h1 span:nth-child(1) { animation-delay: 0.2s; animation-name: fadeInLeft; }.container h1 span:nth-child(2) { animation-delay: 0.4s; animation-name: fadeInLeft; }.container h1 span:nth-child(3) { animation-delay: 0.6s; animation-name: fadeInLeft; }.container h1 span:nth-child(4) { animation-delay: 0.8s; animation-name: fadeInLeft; }.container h1 span:nth-child(5) { animation-delay: 1s; animation-name: fadeInLeft; }.container h1 span:nth-child(10) { animation-delay: 0s; animation-name: fadeInRight; }.container h1 span:nth-child(9) { animation-delay: 0.2s; animation-name: fadeInRight; }.container h1 span:nth-child(8) { animation-delay: 0.4s; animation-name: fadeInRight; }.container h1 span:nth-child(7) { animation-delay: 0.6s; animation-name: fadeInRight; }.container h1 span:nth-child(6) { animation-delay: 0.8s; animation-name: fadeInRight; } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(10%, 30%, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-10%, -30%, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }

 <div class="container"> <h1> Superrr Coool </h1> </div>

有人知道如何解决这个问题吗？

Answer 1

这与h1的宽度无关，但与您的 CSS 动画有关：您正在为 10 个跨度定义淡入，但您有 12 个跨度，因此第 11 个和第 12 个保持不可见 - 见下文，我在其中添加了选择器对于他们来说，第 10 个孩子跨度的规则：

 var spanText = function spanText(text) { var string = text.innerText; var spaned = ''; for (var i = 0; i < string.length; i++) { if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1); else spaned += '<span>' + string.substring(i, i + 1) + '</span>'; } text.innerHTML = spaned; } var headline = document.querySelector("h1"); spanText(headline);

 @import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap'); body { margin: 0; padding: 0; }.container { display: flex; justify-content: center; align-items: center; font-family: 'Oswald', helvetica; background-color: #333; color: #fff; height: 100vh; font-size: 30px; }.container h1 span { letter-spacing: 3px; font-weight: 300; display: inline-block; opacity: 0; text-transform: uppercase; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; transition-timing-function: ease-out; }.container h1 span:nth-child(1) { animation-delay: 0.2s; animation-name: fadeInLeft; }.container h1 span:nth-child(2) { animation-delay: 0.4s; animation-name: fadeInLeft; }.container h1 span:nth-child(3) { animation-delay: 0.6s; animation-name: fadeInLeft; }.container h1 span:nth-child(4) { animation-delay: 0.8s; animation-name: fadeInLeft; }.container h1 span:nth-child(5) { animation-delay: 1s; animation-name: fadeInLeft; }.container h1 span:nth-child(10), .container h1 span:nth-child(11), .container h1 span:nth-child(12) { animation-delay: 0s; animation-name: fadeInRight; }.container h1 span:nth-child(9) { animation-delay: 0.2s; animation-name: fadeInRight; }.container h1 span:nth-child(8) { animation-delay: 0.4s; animation-name: fadeInRight; }.container h1 span:nth-child(7) { animation-delay: 0.6s; animation-name: fadeInRight; }.container h1 span:nth-child(6) { animation-delay: 0.8s; animation-name: fadeInRight; } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(10%, 30%, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-10%, -30%, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }

 <div class="container"> <h1> Superrr Coool </h1> </div>

Answer 2

您没有在 animation 中包含足够的：nth-child 元素。 我将您拥有的最后一个（我相信是 10）更改为正确的数字 -> 12。

我通过检查浏览器检查器并查看您的 JS function 创建了多少跨度标签来解决这个问题。 然后我回去将最后一个跨度 CSS animation 从 10 替换为 12 并向后工作，将每个跨度都更改为下线...

我还分别为 5、6 和 7 添加了适当数量的动画和 animation 持续时间，尽管您可能想在最后玩一下。

 var spanText = function spanText(text) { var string = text.innerText; var spaned = ''; for (var i = 0; i < string.length; i++) { if (string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1); else spaned += '<span>' + string.substring(i, i + 1) + '</span>'; } text.innerHTML = spaned; } var headline = document.querySelector("h1"); spanText(headline);

 @import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap'); body { margin: 0; padding: 0; }.container { display: flex; justify-content: center; align-items: center; font-family: 'Oswald', helvetica; background-color: #333; color: #fff; height: 100vh; font-size: 30px; }.container h1 span { letter-spacing: 3px; font-weight: 300; display: inline-block; opacity: 0; text-transform: uppercase; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; transition-timing-function: ease-out; }.container h1 span:nth-child(1) { animation-delay: 0.2s; animation-name: fadeInLeft; }.container h1 span:nth-child(2) { animation-delay: 0.3s; animation-name: fadeInLeft; }.container h1 span:nth-child(3) { animation-delay: 0.4s; animation-name: fadeInLeft; }.container h1 span:nth-child(4) { animation-delay: 0.6s; animation-name: fadeInLeft; }.container h1 span:nth-child(5) { animation-delay: .7s; animation-name: fadeInLeft; }.container h1 span:nth-child(6) { animation-delay: .9s; animation-name: fadeInLeft; }.container h1 span:nth-child(7) { animation-delay: 1s; animation-name: fadeInLeft; }.container h1 span:nth-child(12) { animation-delay: 0s; animation-name: fadeInRight; }.container h1 span:nth-child(11) { animation-delay: 0.2s; animation-name: fadeInRight; }.container h1 span:nth-child(10) { animation-delay: 0.4s; animation-name: fadeInRight; }.container h1 span:nth-child(9) { animation-delay: 0.6s; animation-name: fadeInRight; }.container h1 span:nth-child(8) { animation-delay: 0.8s; animation-name: fadeInRight; } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(10%, 30%, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-10%, -30%, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }

 <div class="container"> <h1> Superrr Coool </h1> </div>