css3中Spinner的实现
我正在尝试在css3中实现微调器。除了显示重叠旋转器圆的白色正方形外,其他一切都正常工作。如下图所示。浏览器:Firefox 25.0.1 Css:-css3中Spinner的实现,css,spinner,Css,Spinner,我正在尝试在css3中实现微调器。除了显示重叠旋转器圆的白色正方形外,其他一切都正常工作。如下图所示。浏览器:Firefox 25.0.1 Css:- 在Opera 12和IE 11上测试,一切看起来都很棒,这是应该的……您在哪个浏览器中注意到了这种行为?我在Chrome 31.0.1650.57中没有看到前面提到的白色方块。你在用什么浏览器?我的浏览器在Chrome 31和FF 25.0.1中看起来不错。你在运行任何插件或实验设置吗?只需运行我的fiddle示例并仔细查看。它看起来像是附在图片
在Opera 12和IE 11上测试,一切看起来都很棒,这是应该的……您在哪个浏览器中注意到了这种行为?我在Chrome 31.0.1650.57中没有看到前面提到的白色方块。你在用什么浏览器?我的浏览器在Chrome 31和FF 25.0.1中看起来不错。你在运行任何插件或实验设置吗?只需运行我的fiddle示例并仔细查看。它看起来像是附在图片上的。@Zachsauier:非常感谢您为我指明了正确的方向。禁用插件后,其工作正常。
.spinner {
height: 30px;
width: 30px;
margin: 0px auto;
position: relative;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left: 3px solid rgba(0, 0, 0, .15);
border-right: 3px solid rgba(0, 0, 0, .15);
border-bottom: 3px solid rgba(0, 0, 0, .15);
border-top: 3px solid rgba(0, 0, 0, .8);
border-radius: 100%;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}