CSS 微調器無旋轉文本

Question

我在頁面上有一個加載微調器，在單擊按鈕幾秒鍾后顯示。 我試圖在加載圈的中間添加一個加載文本，但它也在旋轉。 如何阻止文本旋轉？ 我認為跨度標簽不受 css 變換的影響。

 function load() { document.getElementById("loader").style.display = "block"; setTimeout(function() { document.getElementById("loader").style.display = "none"; }, 4000); }

 .centered { text-align: center; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } #loader { position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #ffffffbb; border-radius: 50%; border-top: 16px solid #9c5eb8b6; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.loading-text { width: 90px; position: absolute; top: calc(50% - 15px); left: calc(50% - 45px); text-align: center; }

 <button type='button' onclick='load()'>Click</button> <div class="centered"> <div id="loader" style="display:none"> <span class="loading-text">Loading...</span> </div> </div>

Answer 1

不要將微調器和文本都放在同一個元素中，而是添加另一個。 所以我們只能旋轉那個。

我將其命名為.spinner ，在loading-text旁邊：

 function load() { document.getElementById("loader").style.display = "block"; setTimeout(function(){ document.getElementById("loader").style.display = "none"; }, 4000); }

 .centered { text-align: center; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }.spinner { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; border: 16px solid #ffffffbb; border-radius: 50%; border-top: 16px solid #9c5eb8b6; position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -75px 0 0 -75px; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.loader, .loading-text { width: 90px; position: absolute; top: calc(50% - 15px); left: calc(50% - 45px); text-align: center; }

 <button type='button' onclick='load()'>Click</button> <div class="centered"> <div id="loader" style="display:none"> <div class="spinner"></div> <span class="loading-text">Loading...</span> </div> </div>

Answer 2

或者您可以使用pseudo-element ，例如：

 function load() { document.getElementById("loader").style.display = "block"; }

 .centered { text-align: center; position: fixed; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; } #loader { position: absolute; } #loader:before{ content: ""; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #ffffffbb; border-radius: 50%; border-top: 16px solid #9c5eb8b6; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.loading-text { width: 90px; position: absolute; top: calc(50% - 15px); left: calc(50% - 45px); text-align: center; }

 <button type='button' onclick='load()'>Click</button> <div class="centered"> <div id="loader" style="display:none"> <span class="loading-text">Loading...</span> </div> </div>