旋轉時它的旋轉中心位置如何 - CSS動畫

-1

我在css中創建了一個微調框，並且將它放置在沒有動畫的中心，但是當我開始動畫時，我的旋轉框移開。具體當我使用「@keyframes微調」規則。
我如何保持中心位置？旋轉時它的旋轉中心位置如何 - CSS動畫

.spinner-animation{ 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    background: gray; 
 
} 
 

 
.spinner-animation > .spinner{ 
 
    width: 400px; 
 
    height: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation > .content{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 

 
@keyframes spinner { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <span class="spinner"></span> 
 
    <div class="content">Loading...</div> 
 
</div>

來源

2017-05-07 DeveloperBeginner

謝謝大家對你的答案。 – DeveloperBeginner

我修改了動畫，並增加了transform-origin的微調：d

.spinner-animation{ 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    background: gray; 
 
} 
 

 
.spinner-animation > .spinner{ 
 
    width: 400px; 
 
    height: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform-origin: top left; 
 
    transform: translate(-50%,-50%); 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation > .content{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 

 
@keyframes spinner { 
 
    0% { 
 
    transform: rotate(0deg) translate(-50%,-50%); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg) translate(-50%,-50%); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <span class="spinner"></span> 
 
    <div class="content">Loading...</div> 
 
</div>

來源

2017-05-07 02:09:29

Flex的框溶液：顯示作爲flex元素的父元素，並對齊（垂直方向）和證明（水平地）其絕對定位的兒童到中心。

.spinner-animation{ 
 
    width: 500px; 
 
    height: 500px; 
 
    background: gray; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.spinner-animation > .spinner{ 
 
    width: 400px; 
 
    height: 400px; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation > .content{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 

 
@keyframes spinner { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <span class="spinner"></span> 
 
    <div class="content">Loading...</div> 
 
</div>

來源

2017-05-07 02:02:49

把span在另一個容器和應用position: absolute到這個容器

.spinner-animation { 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    background: gray; 
 
} 
 

 
.holder { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 400px; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.holder .spinner { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation>.content { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 
@keyframes spinner { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <div class="holder"> 
 
    <span class="spinner"></span> 
 
    </div> 
 
    <div class="content">Loading...</div> 
 
</div>

來源

2017-05-07 02:03:08

在動畫中的transform被覆蓋translate()定位，您需要將translate()添加到您的動畫transform屬性中。

.spinner-animation{ 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    background: gray; 
 
} 
 

 
.spinner-animation > .spinner{ 
 
    width: 400px; 
 
    height: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation > .content{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 

 
@keyframes spinner { 
 
    0% { 
 
    transform: translate(-50%,-50%) rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: translate(-50%,-50%) rotate(360deg); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <span class="spinner"></span> 
 
    <div class="content">Loading...</div> 
 
</div>

來源

2017-05-07 02:08:37

旋轉時它的旋轉中心位置如何 - CSS動畫

回答

相關問題