2つのHTML見出し - 円の場所を入れ替えますか？

-5

私は2つの見出し/欄を持っており、写真のように5秒後に場所を変更する必要があります。私はいくつかのトランジションなどを試しましたが、循環的に要素を移動する方法はどこにもありません。2つのHTML見出し - 円の場所を入れ替えますか？

要素の移動は「半円形」のようにする必要があります。サンプルコードはコメントにあります。

2017-07-05 user5618385

あなたは私たちにあなたが今まで試してみました何あなたのコードを示していただけますか？ – amoeba

[ヘルプセンター]（http://stackoverflow.com/help）を見て[良い質問をする方法]（http://stackoverflow.com/help/how-to-ask）とどんなタイプの質問がサイトの – Pete

の[topic]（http://stackoverflow.com/help/on-topic）であるかは少なくともあなた自身でこれをコード化しようとしています。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –

見出しをコンテナ内に配置します。 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

2つのHTML見出し - 円の場所を入れ替えますか？

答えて

関連する問題