ローダーdiv内のテキストの回転を停止します

Question

私はloaderを見つけました。CSSトリックです。ローダーにテキストや画像をローテーションなしで入れたいと思います。

.loader { 
 
    border: 5px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 5px solid #fff; 
 
    width: 50px; 
 
    height: 50px; 
 
    animation: spin 1s linear infinite; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    margin: 10px auto; 
 
    font-size: 12px; 
 
} 
 
.loader > span { 
 
    animation: no-spin .5s linear infinite; 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes no-spin { 
 
    0% { 
 
    transform: rotate(360deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
}

<div class="loader"> 
 
    <span>LOGO</span> 
 
</div>

私は逆回転のため@keyframes no-spinを試みたが、うまくいきませんでした。

Answer 1

<span>にdisplay:blockを追加します。 display:inlineの変換は機能しません（specで指定されています）。実際には、これはdisplay:blockまたはdisplay:inline-blockを使用するようになっています。

.no-spinのアニメーション時間を1sに変更し、スピンアニメーションのスピードに合わせました。 これは紡績しないの錯覚を与え、実際には同じ速度で反対方向に回転しています。

.loader { 
 
    border: 5px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 5px solid #fff; 
 
    width: 50px; 
 
    height: 50px; 
 
    animation: spin 1s linear infinite; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    margin: 10px auto; 
 
    font-size: 12px; 
 
} 
 
.loader > span { 
 
    display: block; 
 
    animation: no-spin 1s linear infinite; 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes no-spin { 
 
    0% { 
 
    transform: rotate(360deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
}

<div class="loader"> 
 
    <span>LOGO</span> 
 
</div>

Answer 2

擬似要素にspinを使用し

.loader { 
 
    position: relative; 
 
    width: 60px; 
 
    height: 60px; 
 
    text-align: center; 
 
    line-height: 60px; 
 
    margin: 10px auto; 
 
    font-size: 12px; 
 
} 
 
.loader::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    border: 5px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 5px solid #fff; 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    animation: spin 1s linear infinite; 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="loader"> 
 
    <span>LOGO</span> 
 
</div>