狼読

 
2020/04/21

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

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

HTMLの構造

HTMLの構造についてご紹介します。1文字ずつ円形状に表示する都合上基本的には、1文字ずつ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>

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

ROUDOKU

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

CSSのご紹介

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

<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>

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

サンプル実装例

ROUDOKU

サンプル実装例のようにちょっといびつですが、円形状に表示することができました。

まとめ

上記のようにposition:relativeとabsoluteを文字1つ1つに使うとこのように自由に配置することができます。先ほどの物をちょっと一手間加えると次のようなことも可能です。

ROUDOKU

ぜひ、色々試して見てください。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/06/05

[jquery]クリック時に矢印を動かして展開したことがわかるアコーディオンの作り方

投稿カレンダー

2020年11月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Technology

category

©狼読