兩個HTML標題 - 圈子中的交換位置？

-5

我有兩個標題/ div，我需要在5秒後像圖片一樣更換地點。我嘗試了一些過渡和類似的過程，但我沒有找到任何地方如何以循環方式移動元素。兩個HTML標題 - 圈子中的交換位置？

元素的移動必須像「半圓」。示例代碼在註釋中。

2017-07-05 user5618385

能否請您告訴我們您的代碼，你已經嘗試到現在？ – amoeba

請參考[幫助中心]（http://stackoverflow.com/help）查看[如何提出一個好問題]（http://stackoverflow.com/help/how-to-ask）和什麼類型的問題是[關於主題]（http://stackoverflow.com/help/on-topic）的站點 – Pete

預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

將標題置於容器內。使用CSS動畫可以旋轉容器，並在另一個方向旋轉標題。動畫是無限的，所以延遲在動畫本身。

由於延遲，我們不能簡單地逆轉rotate動畫，我們需要添加反向rotateCounter動畫。

.container { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    animation: rotate 12s linear infinite; 
 
} 
 

 
.heading { 
 
    position: absolute; 
 
    animation: rotateCounter 12s linear infinite; 
 
} 
 

 
.heading1 { 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.heading2 { 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
@keyframes rotate { 
 
    8% { transform: rotate(-180deg); } 
 
    50% { transform: rotate(-180deg); } 
 
    58% { transform: rotate(-360deg); } 
 
    100% { transform: rotate(-360deg); } 
 
} 
 

 
@keyframes rotateCounter { 
 
    8% { transform: rotate(180deg); } 
 
    50% { transform: rotate(180deg); } 
 
    58% { transform: rotate(360deg); } 
 
    100% { transform: rotate(360deg); } 
 
}

<div class="container"> 
 
    <h2 class="heading heading1">Heading 1</h2> 
 
    <h2 class="heading heading2">Heading 2</h2> 
 
</div>

來源

2017-07-05 09:32:02

謝謝youuuuuu !!!! – user5618385

嘗試setInterval()功能。就像其他人說的。如果你仍然無法工作。請把你的例子代碼，然後我們可以幫助你。

來源

2017-07-05 09:25:44 gaback

兩個HTML標題 - 圈子中的交換位置？

回答

相關問題