文字を円形状に表示するアニメーションをcssで作ろう

今回は、文字を円形状に表示するアニメーションをcssで作成する方法をご紹介します。考え方として、１つ１つの文字に対して１つずつcssを与えて、時間経過を１つずつ遅らせることで表示場所を変えていく方法をとります。ご紹介は内容は次の通りです。

HTMLの構造

HTMLの構造についてご紹介します。１文字ずつ円形状に表示する都合上基本的には、１文字ずつdivタグ、pタグ、spanタグなどで囲む必要があります。
つまり次のような構造になります。

<div class="en"><span>R</span><span>O</span><span>U</span><span>D</span><span>O</span><span>K</span><span>U</span></div>

上記のように１つずつの文字に対してcssを当てれるように作ります。
見た目状は次のように、ROUDOKUという文字が並んでるだけに見えます

ROUDOKU

では、上記のHTMLに対してcss当ててデザインしていきましょう。

CSSのご紹介

上述のHTMLを元にcssを作成していきましょう。
まず、enというクラスに対してposition:relativeを持たせて、spanに対してposition:absoluteを持たせましょう。その後、top,left,right,bottomを使って１文字ずつ円形状になるように調整していきましょう。

<style>
.en{
 position:relative;
margin-bottom:50px;
margin-top:50px;
height:100px;
}
.en span{
 position:absolute;
 display:block;
}
.en span:nth-of-type(2){
 top:-26px;
 left:25px;
transform:rotate(-28deg);
}
.en span:nth-of-type(3){
 top:-25px;
 left:64px;
transform:rotate(16deg);
}
.en span:nth-of-type(4){
 top:5px;
 left:92px;
transform:rotate(13deg);
}
.en span:nth-of-type(5){
 top:37px;
 left:76px;
transform:rotate(20deg);
}
.en span:nth-of-type(6){
 top:47px;
 left:43px;
transform:rotate(21deg);
}
.en span:nth-of-type(7){
 top:34px;
 left:10px;
transform:rotate(-10deg);
}
</style>
<div class="en"><span>R</span><span>O</span><span>U</span><span>D</span><span>O</span><span>K</span><span>U</span></div>

上記のように１つ１つ文字を位置調整して、transform:rotateでちょっと角度をつけるとより円形状に見えるようになると思います。