【CSS】たたっ斬る！！【小ネタ】
どうも！LSSです！！
さて、昨日に続き、今日もCSS小ネタ。
またtransitionを使った小ネタを思いついたので、やってみます！
一言でいうと「ズバァッッッ！！」って感じですｗ
たたっ斬る！！サンプル
↓の黒いバーに、マウスカーソル（スマホの人は指）を乗せてみてください^^
斬られ役
コード
<style><!--
.tachi{
border:5px inset gray;
background-color:white;
background-repeat:no-repeat;
background-image:linear-gradient(150deg,black 50%,transparent 60%),linear-gradient(150deg,transparent 40%,black 50%);
background-position:0px 0px,0px 0px;
}
.tachi:hover{
transition:2s ease-in 0s;
background-position:-1000px 0px,1000px 0px;
}
--></style>
<div class="tachi">斬られ役</div>
コード解説
全体的な構造
この、斬られ役のバーの本体は、最後の一行、
<div class="tachi">斬られ役</div>
の部分です。
<div>要素に、「tachi」というクラス名を付けて、「斬られ役」という言葉が入っているだけの要素ですね。
で、この「tachi」というクラス名（任意の名前。好きに名付けてOKです！）に対する指定を、<style>タグに書いています。
その<style>タグですが、<style>～</style>の中に今回は、
.クラス名{
マウスカーソルが乗ってない時の基本的なCSS設定;
}
.クラス名:hover{
transition:変化にかけるアニメーションの再生時間;
変化する部分のプロパティ;
}
という形式で書いています。
なお、アニメーションの要（かなめ）は「transition」ですが、これを
「上の基本設定の中に入れる」→元に戻る時に逆再生アニメになる
「下の:hoverの中に入れる」→変化する時だけアニメし、戻る時は一瞬で戻る
ようになります。
今回は下のほうに入れてみました！
たたっ斬りを表現するための画像イメージ
最初、一本の黒いバーが表示されていますが、実はこれ、「右と左の２枚の背景画像を重ねて表示」しています。
ひとつめは、
斬られ役
↑こんな画像。右の白い部分は transparent（透過）です。
ふたつめは、
斬られ役
↑こんな画像。左の白い部分は transparent（透過）です。
コードはそれぞれ、
<div style="border: 1px solid black; background-color: white; background-image: linear-gradient(150deg,black 50%,transparent 60%);">斬られ役</div>
<div style="border: 1px solid black; background-color: white; background-image: linear-gradient(150deg,transparent 40%,black 50%);">斬られ役</div>
となります。
どちらも、linear-gradientで150度の角度をつけた上で、
「前者は横幅の50%（まんなか）まで黒、50~60%はグラデーション、60%より後は完全な透過」
「後者は横幅の40%まで完全な透過、40~50%はグラデーション、50%（まんなか）より後は黒」
という指定にしています。
50%の前と後ろ、どちらも黒でそれぞれ塗りつぶしているため、この２つを重ねて表示すると、「ただの黒いバー」に見えるんですね^^
複数のlinear-gradientを重ねて表示
元のコードの
background-image:linear-gradient(150deg,black 50%,transparent 60%),linear-gradient(150deg,transparent 40%,black 50%);
この部分。
background-imageプロパティにlinear-gradientを指定していますが、
「複数のlinear-gradientをカンマ区切りで並べる」と、
イメージを重ねて表示する事になります^^
また、こうして重ねて表示した時、
「背景画像のサイズを指定する background-size 」や、
「背景画像の表示位置を指定する background-position 」も、
カンマ区切りで指定する事で「一枚目、二枚目、個別に設定」する事ができます！
過去記事で、
試してみた例がありますので、詳しく知りたい方は見てやってください。
background-positionで、それぞれ位置指定
今回の例では background-size は使用していませんが、background-position は、
マウスカーソルが乗る前の方の指定
background-position:0px 0px,0px 0px;
マウスカーソルが乗った時の指定
background-position:-1000px 0px,1000px 0px;
という指定をかけています。
これにより、「最初はどちらも0PX 0px（表示位置変更なし）」ですが、カーソルが乗ると、
「一枚目は左に1000ピクセルずらして表示、二枚目は右に1000ピクセルずらして表示」
する事になります。
transitionを書くだけで勝手にアニメ化！
transition:2s ease-in 0s;
この一行を入れておくだけで、背景イメージが
「一枚目は通常の位置だったのが1000ピクセル左に、二枚目は通常の位置だったのが1000ピクセル右に」
大移動する過程を自動的にアニメ化してくれます！
2sは変化にかける時間で、この場合「２秒」
後ろの0sは変化を開始するまでの待ち時間で、この場合「0秒（カーソルが乗るとすぐアニメ開始）」
という指定にしています。
ゆっくりじっくり、変化する様子を見たい時には 2s の数字を大きくすればOKです^^
最後に、真ん中の ease-in ですが、これは「最初はゆっくり、だんだん速く」と動きの速度に緩急がつく指定です。
ここで指定できるものには、以下の候補があります。
linear 直線的な変化。最初から最後まで同じスピードで変化します。
ease 最初ゆっくり。途中スピードアップ。最後はまたゆっくり。
ease-in 最初ゆっくり。だんだん速くなります。
ease-out 最初は速く。だんだん遅くなります。
ease-in-out 最初ゆっくり。だんだん速くなり、最後はまたゆっくり。
（との事なんですが、この説明では easeとease-in-outの違いが分かりませんｗでも微妙に違うようです。）
ちょっとグラデ内容に変化をつけてみました
斬られ役
コード
<style><!--
.tachi2{
border:5px inset gray;
background-color:white;
background-repeat:no-repeat;
background-image:linear-gradient(150deg,black 50%,transparent 50%,transparent 60%,black 60%,transparent 70%),linear-gradient(150deg,transparent 30%,black 40%,transparent 40%,transparent 50%,black 50%);
background-position:0px 0px,0px 0px;
}
.tachi2:hover{
transition:4s ease-in 0s;
background-position:-1000px 0px,1000px 0px;
}
--></style>
<div class="tachi2">斬られ役</div>
クラス名と、赤文字部分（linear-gradientの内容）だけ、ちょっと凝ってみました。
これは、２つの背景イメージでいうと
斬られ役
斬られ役
この２つを重ねた場合になります。
こうしてグラデーションの内容を変更するだけでもまた、感じが違ってきますね^^
あとがき
昨日の記事、
に引き続き、CSS transitionネタでした。
なお、今日の「たたっ斬る！！」は、昨日の記事にいただいた、
タコスカさん(id:kefugahi)の はてブコメント、
kefugahi太刀筋と言う感じ…。
から思いつきました。
いつもコメントありがとうございます^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
