Css 如何防止微调器内的图标旋转?
我已经创建了一个内置暂停图标的微调器。它目前工作正常,但暂停图标似乎与其他微调器一起旋转。我不想让它旋转。但我希望带橙色圆圈的旋转器继续旋转。我该怎么做 这是我的密码Css 如何防止微调器内的图标旋转?,css,font-awesome,Css,Font Awesome,我已经创建了一个内置暂停图标的微调器。它目前工作正常,但暂停图标似乎与其他微调器一起旋转。我不想让它旋转。但我希望带橙色圆圈的旋转器继续旋转。我该怎么做 这是我的密码 斯宾纳先生{ 高度:40px; 宽度:40px; 位置:绝对位置; 最高:50%; 左:50%; 裕度:-20px-20px 0; 边框:3px实心#F2B049; 边框顶部:3倍实心#E6FFFC; 左边框:3px实心#E6FFFC; 背景色:#1FBBA6; 边界半径:100%; 文本对齐:居中; 线高:40px; } 已解
斯宾纳先生{
高度:40px;
宽度:40px;
位置:绝对位置;
最高:50%;
左:50%;
裕度:-20px-20px 0;
边框:3px实心#F2B049;
边框顶部:3倍实心#E6FFFC;
左边框:3px实心#E6FFFC;
背景色:#1FBBA6;
边界半径:100%;
文本对齐:居中;
线高:40px;
}
已解决。这是您的密码和相关代码。如果您对如何改进这一点有任何建议,请告诉我:D
Correct:
<Br/>
<div class="spinner-wrapper relative">
<span class="spinner fa-spin inline-block" ></span>
<div class="put-on-top">
<i class="fa fa-pause fa-inverse fa-lg"></i>
</div>
</div>
<style>
.relative {
position: relative;
}
.put-on-top {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 45px;
text-align: center;
}
.spinner-wrapper {
display: inline-block;
}
.inline-block {
display: inline-block;
}
.spinner {
height: 40px;
width: 40px;
border: 3px solid #F2B049;
border-top: 3px solid #E6FFFC;
border-left: 3px solid #E6FFFC;
background-color: #1FBBA6;
border-radius: 100%;
text-align: center;
line-height: 40px;
}
正确:
.亲戚{
位置:相对位置;
}
.放在上面{
位置:绝对位置;
宽度:100%;
身高:100%;
排名:0;
左:0;
线高:45px;
文本对齐:居中;
}
纺纱机包装{
显示:内联块;
}
.内联块{
显示:内联块;
}
斯宾纳先生{
高度:40px;
宽度:40px;
边框:3px实心#F2B049;
边框顶部:3倍实心#E6FFFC;
左边框:3px实心#E6FFFC;
背景色:#1FBBA6;
边界半径:100%;
文本对齐:居中;
线高:40px;
}
Correct:
<Br/>
<div class="spinner-wrapper relative">
<span class="spinner fa-spin inline-block" ></span>
<div class="put-on-top">
<i class="fa fa-pause fa-inverse fa-lg"></i>
</div>
</div>
<style>
.relative {
position: relative;
}
.put-on-top {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 45px;
text-align: center;
}
.spinner-wrapper {
display: inline-block;
}
.inline-block {
display: inline-block;
}
.spinner {
height: 40px;
width: 40px;
border: 3px solid #F2B049;
border-top: 3px solid #E6FFFC;
border-left: 3px solid #E6FFFC;
background-color: #1FBBA6;
border-radius: 100%;
text-align: center;
line-height: 40px;
}