どうも！LSSです！！
先日の記事、【CSS】回転＋移動＝渦巻き？【実験作】にいただいたコメントを元に、別バージョンを作ってみました。
文中の一部が渦を巻く
こちらは、Little Strange Softwareという名称のブログです。以後、お見知りおきを。
コード
<style><!--
@keyframes bfrnda1{
0%,20%{transform:rotate(0deg) translateX(0px) scale(1);}
60%{transform:rotate(360deg) translateX(70px) scale(4);}
100%{transform:rotate(720deg) translateX(0px) scale(1);}
}
@keyframes bfrnda2{
0%,30%{transform:rotate(0deg) translateX(0px) scale(1);}
65%{transform:rotate(-900deg) translateX(150px) scale(3);}
100%{transform:rotate(-1800deg) translateX(0px) scale(1);}
}
@keyframes bfrnda3{
0%,40%{transform:rotate(0deg) translateX(0px) scale(1);}
70%{transform:rotate(1260deg) translateX(-100px) scale(5);}
100%{transform:rotate(2520deg) translateX(0px) scale(1);}
}
.bfrnd1{
display:inline-block;
transform-origin:100% 50%;
animation:bfrnda1 8s linear 0s infinite;
}
.bfrnd2{
display:inline-block;
transform-origin:50% 50%;
animation:bfrnda2 8s linear 0s infinite;
}
.bfrnd3{
display:inline-block;
transform-origin:0% 50%;
animation:bfrnda3 8s linear 0s infinite;
}
--></style>
<p>こちらは、<span class="bfrnd1">Little</span> <span class="bfrnd2">Strange</span> <span class="bfrnd3">Software</span>という名称のブログです。以後、お見知りおきを。</p>
いただいたコメント
これは、タコスカ様(id:kefugahi)からいただいたブクマコメントを実現してみました^^
【CSS】回転＋移動＝渦巻き？【実験作】 - Little Strange Software
おおこれも面白い！文中とかでも可能なのかな？あるいは逆向き回転だとか。複数の文字でバラバラに動いたりして、最終的にひとつのセンテンスみたくなったら賑やかで良いかも！？
2021/09/01 19:38
複数のkeyframes、複数のclassを用意して、文章中の部分に当てた感じですね。
単語単位にしましたが、もちろん一文字だけにしてもOKです^^
ちなみに、逆回転は
@keyframes bfrnda2{
0%,30%{transform:rotate(0deg) translateX(0px) scale(1);}
65%{transform:rotate(-900deg) translateX(150px) scale(3);}
100%{transform:rotate(-1800deg) translateX(0px) scale(1);}
}
のように、degの数値にマイナスをつける事で実現しています。
他に、421miyako様からいただいたコメントも実現したいですね^^
（ちょっと難しい部分がありそうで、新たな挑戦になる予感）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
