英文:
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
<div class="spinner">abc</div>
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: "";
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
<div class="spinner-container">
<div class="spinner absolute"></div>
<p class="absolute">abc</p>
</div>
987
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论