【CSS】鹿威し（ししおどし）のように揺れる見出し【カタカタ改変】
どうも！LSSです！！
以前に書いたCSSで、
が結構ウケが良いようで、いくつかのブログで続けて使っていただいています^^
で、今回はそれを改変したものを作ってみました！
もうすぐ年が明けるので、お正月っぽい？和風テイストの「鹿威し」風に仕上げました。
鹿威しのように揺れる見出し
こんな風に、ボックス要素につけた見出しが鹿威しのように揺れる事で自己主張します！
また、ボックス要素にマウスカーソルが乗っている間は動作がちょっとゆっくりになります。
コード
<style><!--
@keyframes shishiodoshi{
0%{transform:rotate(-10deg);}
70%{transform:rotate(-10deg);}
90%{transform:rotate(10deg);}
93%{transform:rotate(-5deg);}
96%{transform:rotate(0deg);}
100%{transform:rotate(-10deg);}
}
.smidashi{
display:inline-block;
position:relative;
border-radius:15px;
border:10px ridge greenyellow;
padding:15px;
}
.smidashi:before{
display:inline-block;
content:"ここに注目 ↓ ";
position:absolute;
top:-20px;
left:-20px;
background-image:linear-gradient(yellowgreen,greenyellow,yellowgreen);
padding:3px;
font-weight:bold;
color:white;
text-shadow:-2px -2px 0px yellowgreen;
transform-origin:15% 50%;
animation:shishiodoshi 5s linear 0s infinite normal;
}
.smidashi:hover:before{
animation-duration:8s;
}
--></style>
<div class="smidashi">
<p>こんな風に、ボックス要素につけた見出しが<ruby>鹿威し<rt>ししおどし</rt></ruby>のように揺れる事で自己主張します！</p>
<p>また、ボックス要素にマウスカーソルが乗っている間は動作がちょっとゆっくりになります。</p>
</div>
コード中、赤文字で書いている部分が中身になります。
自由に書き換えてご利用いただければ、と思います^^
見た目に関する部分
動作とは関係のない、見た目に関する部分を挙げていきます。
「使ってみたいけど色合いとかが自分のブログと合わない」などの場合、このへんを調整してみてください。
ボックス本体に関する指定
.smidashi{
display:inline-block;
position:relative;
border-radius:15px;
border:10px ridge greenyellow;
padding:15px;
}
border-radius:15px;
ボックスの角を15pxのサイズで角丸にしています。
border:10px ridge greenyellow;
10px幅の太さの枠線で囲んでいます。
ridge の部分は、前回のカタカタでは double でした。
普通の線ならsolid、二重線のdouble、点線のdotted、破線のdashed、他、inset、outset、ridge、grooveなどが選べます。
greenyellowの部分が枠線の色を指定している部分ですね。
padding:15px;
内側に15pxの余白を設けています。
見出し部分に関する設定
.smidashi:before{
display:inline-block;
content:"ここに注目 ↓ ";
position:absolute;
top:-20px;
left:-20px;
background-image:linear-gradient(yellowgreen,greenyellow,yellowgreen);
padding:3px;
font-weight:bold;
color:white;
text-shadow:-2px -2px 0px yellowgreen;
transform-origin:15% 50%;
animation:shishiodoshi 5s linear 0s infinite normal;
}
background-image:linear-gradient(yellowgreen,greenyellow,yellowgreen);
竹っぽく、異なる黄緑系の色を使ってグラデーション背景にしています。
単一の色にする場合は、この一行を削除して代わりに
background-color:色名;
のように指定できます。
あと、さりげなく、
text-shadow:-2px -2px 0px yellowgreen;
見出しの中の文字の左上に影をつけています。
不要であれば削ってもいいですし、色を変更するのもアリです^^
今回、主にいじったのはkeyframesの内容
今回、動きを変更するのに主にいじったのは
@keyframes shishiodoshi{
0%{transform:rotate(-10deg);}
70%{transform:rotate(-10deg);}
90%{transform:rotate(10deg);}
93%{transform:rotate(-5deg);}
96%{transform:rotate(0deg);}
100%{transform:rotate(-10deg);}
}
この部分になります。
各行冒頭に「%」がアニメーションの時間進行に当たる部分で、それぞれのタイミングでの指定値を
transform:rotate(-10deg);
のように「要素を傾ける角度」を指定するものにしています。
0%の時点で-10deg、70%の時点でも-10degなので、
「アニメーション開始から指定時間の0%経過時点（つまり開始時）では-10degの傾き、次に指定しているのは70%経過時点で、そこでも-10degを指定している」
事から、
「開始してから指定時間の70%経過するまでは-10degの傾きをキープ」
している事になります。
次に指定しているのが90%の時点で「10degを指定」しているため、
「70%時点から90%時点までは-10degから10degに徐々に変化していく」
という事になります。
…てな感じで、その後の動きもちょこちょこ指定していったものが今回のサンプルです。
あと、余談ですが、
<ruby>鹿威し<rt>ししおどし</rt></ruby>
このHTMLタグを使う事で、
鹿威し
のようにルビを振る事ができます。（これはCSSじゃなくHTML単体の持つ機能）
読みづらい感じを使う時には良さそうですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
