具有静态文本的CSS旋转器

huangapple go评论62阅读模式
英文:

CSS-Spinner with static text inside

问题

我尝试创建一个使用CSS实现的非常简单的加载动画。

<div class="spinner">abc</div>

如何让旋转动画内部的文本保持静态,而不需要在旋转动画外部添加另一个元素?我不想使用库来实现这个效果,但如果有助于解决问题,我可以使用jQuery。但它应该简单而易于实现。

英文:

I try to get a very simple loading animation that is implemented with CSS.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.spinner
{
    border: 5px solid red;
    border-top: 5px solid green;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 3s linear infinite;
}
@keyframes spin
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<!-- language: lang-html -->

123

&lt;div class=&quot;spinner&quot;&gt;abc&lt;/div&gt;

987

<!-- end snippet -->

Any way I get the text inside the spinner to be static and not turning without having another element outside the spinner?

I do not want to integrate libs for that. But I use jQuery if that helps. But it should be simple and easy.

答案1

得分: 4

你可以使用::before来在文本周围添加一个旋转的加载图标。以下是一个示例代码:

.spinner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: aliceblue;
    border-radius: 50%;
}

.spinner::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    z-index: -100;
    bottom: -10px;
    background: rgb(82,210,56);
    background: linear-gradient(15deg, rgba(82,210,56,1) 0%, rgba(135,107,184,1) 11%, rgba(106,190,96,1) 43%, rgba(209,35,35,1) 79%, rgba(217,186,173,1) 100%);
    border-radius: 50%;
    transform-origin: center center;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
<div class="spinner">
    asdasd
    <br>
    asdasd
</div>
英文:

You can use ::before to add a spinner around text.
here is a sample code

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

 .spinner
    {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            border-radius: 50%;
    }



.spinner::before {
            content: &quot;&quot;;
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            z-index: -100;
            bottom: -10px;
            background: rgb(82,210,56);
            background: linear-gradient(15deg, rgba(82,210,56,1) 0%, rgba(135,107,184,1) 11%, rgba(106,190,96,1) 43%, rgba(209,35,35,1) 79%, rgba(217,186,173,1) 100%);
            border-radius: 50%;
            transform-origin: center center;
            animation: spin 2s linear infinite;
    }
    @keyframes spin {
           0% {
              transform: rotate(0);
           }
           100% {
              transform: rotate(360deg);
           }
    }

<!-- language: lang-html -->

<div class="spinner">
asdasd
<br>
asdasd
</div>

<!-- end snippet -->

答案2

得分: 2

你可以使用一个包装元素来定位其中的元素。

123

<div class="spinner-container">
  <div class="spinner absolute"></div>
  <p class="absolute">abc</p>
</div>

987
英文:

You could use a wrapper element to position your elements inside it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.spinner {
  right: 0;
  border: 5px solid red;
  border-top: 5px solid green;
  border-radius: 50%;
  animation: spin 3s linear infinite;
}

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

.spinner-container {
  position: relative;
  width: 35px;
  height: 35px;
}

.spinner-container p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<!-- language: lang-html -->

123

&lt;div class=&quot;spinner-container&quot;&gt;
  &lt;div class=&quot;spinner absolute&quot;&gt;&lt;/div&gt;
  &lt;p class=&quot;absolute&quot;&gt;abc&lt;/p&gt;
&lt;/div&gt;

987

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月13日 18:09:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/76463815.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定