我有一个用于长时间运行的微调器,但我无法让它旋转。我已经阅读了与此相关的其他 SO 问题,但它们似乎都没有让我的场景起作用。
我有以下 HTML
<div class="ms-BasicSpinner">
<div class="ms-Spinner">
<div class="ms-Spinner-circle ms-Spinner--large"></div>
<div class="ms-Spinner-label">Creating...</div>
</div>
</div>
和 CSS
.ms-Spinner > .ms-Spinner-circle.ms-Spinner--large {
width: 28px;
height: 28px;
}
.ms-Spinner > .ms-Spinner-circle {
margin: auto;
box-sizing: border-box;
border-radius: 50%;
width: 100%;
height: 100%;
border: 1.5px solid #c7e0f4;
border-top-color: #0078d7;
-webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}
.ms-Spinner > .ms-Spinner-label {
color: #0078d7;
margin-top: 10px;
text-align: center;
}
.ms-BasicSpinner .ms-Spinner {
display: inline-block;
margin: 10px 0;
}
我还必须关注 JSFiddle https://jsfiddle.net/20ufspze/
我缺少什么才能让微调器旋转?
非常感谢任何帮助
提前致谢
您将三次贝塞尔函数应用于旋转以获得所需的效果。在此处调整底部元素,您可以使用以下方法旋转蓝色部分:
@-webkit-keyframes ms-Spinner-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes ms-Spinner-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
并通过将cubic-bezier
部分重写为:
-webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句