[英]Spinner not spinning
我有一個旋轉器,用於長時間運行,但是無法旋轉。 我已經閱讀了與此相關的其他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);
動畫任何HTML
組件的最佳實踐是在CSS中使用動畫關鍵幀。
@keyframes anim {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
...
.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;
animation: anim 1.3s infinite;
}
...
小提琴鏈接: https : //jsfiddle.net/8Ly697ne/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.