どうも！LSSです！！
ちょっと久々に、CSSネタいってみます！
サンプル
↓こんなのを作ってみました。
黄緑色のバーにマウスカーソルを（スマホの人は指を）乗せてみてください。
コード
<style><!--
.hoveranm{
border-radius:15px;
border:10px outset greenyellow;
padding:5px;
background-color:yellowgreen;
font-weight:bold;
color:white;
font-size:20px;
text-shadow:0px 0px 5px black;
background-image:linear-gradient(-10deg,transparent 20%,white 50%,transparent 80%);
background-repeat:no-repeat;
background-size:auto 400px;
background-position:0px -500px;
transition:2s linear 0s;
}
.hoveranm:hover{
background-position:0px 500px;
}
--></style>
<div class="hoveranm">こういうバーで、マウスカーソルをのせると</div>
ざっくりコード解説
最後の行、
<div class="hoveranm">こういうバーで、マウスカーソルをのせると</div>
がバー本体で、それ以外の
<style><!--
から
--></style>
までがアニメ―ションを含むCSS装飾の指定部分です。
<style><!--
から
--></style>
までを書いておけば、最後の<div>の行はいくつでも置けます^^
また、コードのうち、
<style><!--
.hoveranm{
border-radius:15px;
border:10px outset greenyellow;
padding:5px;
background-color:yellowgreen;
font-weight:bold;
color:white;
font-size:20px;
text-shadow:0px 0px 5px black;
background-image:linear-gradient(-10deg,transparent 20%,white 50%,transparent 80%);
background-repeat:no-repeat;
background-size:auto 400px;
background-position:0px -500px;
transition:2s linear 0s;
}
.hoveranm:hover{
background-position:0px 500px;
}
--></style>
<div class="hoveranm">こういうバーで、マウスカーソルをのせると</div>
↑青字部分は「光が斜めに横切る動作」以外の装飾になります。
オレンジ色部分が斜めに横切る光を描いている部分で、
赤字部分が光を動かしている部分となります。
光のデザイン
background-image:linear-gradient(-10deg,transparent 20%,white 50%,transparent 80%);
background-repeat:no-repeat;
background-size:auto 400px;
↑この部分ですね。
background-image:linear-gradient(-10deg,transparent 20%,white 50%,transparent 80%);
linear-gradientで「-10度」傾けた、「透明→白→透明」に変化するグラデーションを描いています。
linear-gradientについては、過去記事
直線グラデーションもやってみたら、よく見るCSSマーカーに行きついた話
【CSS】変わったマーカー、また思いついたんですが扱いづらいかも…？【小ネタ】
で色々書いていますので、詳しく知りたい方は読んでみてください^^
background-repeat:no-repeat;
その「光」を「繰り返し描画しない」ようにしています。
background-size:auto 400px;
「光」を描く大きさの指定になります。
「背景画像の表示サイズ」を指定するCSSプロパティで、横幅・高さの順に書きます。
この場合、横幅「auto（自動的に決める＝背景を敷く要素の横幅いっぱいになります）」で、高さ「400ピクセル」という指定になっています。
以上、あわせると実際どんなものになるかというと、
↑のコード
<div style="width: 100%; height: 400px; background-color: yellowgreen; background-image: linear-gradient(-10deg,transparent 20%,white 50%,transparent 80%); background-repeat: no-repeat; background-size: auto 400px;">こんな感じになります。</div>
カーソルを乗せると光が移動する仕組み
background-position:0px -500px;
transition:2s linear 0s;
と、
background-position:0px 500px;
の部分ですね。
まず、最初の「カーソルが乗っていない状態の時」には
background-position:0px -500px;
で「光を描いた背景画像」を「500ピクセル 上にずらして表示」しています。
背景画像サイズを400ピクセルで指定していたので、「上すぎて全く表示されない」という事になりますねｗ
そして、
transition:2s linear 0s;
これは
「（何か変化があった時には）2秒の時間をかけて変化する。変化開始は0秒後」
という指定になります。
transitionについては、これまた過去記事
CSSで開閉メニュー 改造版！
に、もう少し詳しく書いています。
そして、マウスカーソルを乗せた時に
background-position:0px 500px;
「光を描いた背景画像」を「500ピクセル 下にずらして表示」という指定が有効になります。
「500ピクセル 上」から「500ピクセル 下」に変化した事で、「上から下への大移動」を「2秒の時間をかけて変化する」という動きになるんですね^^
あとがき
と、いうわけで、少し久々にCSSネタを書いてみました。
いつ以来だろ？と思って確認してみると、
↑これ以来でしたね。
（途中、別に「まとめ記事」はありましたが）
この「光が横切る」の、以前から他の方のブログで動いているのを見かけていて（今回書いたのとは違う感じでしたが）、「ちょっと違う感じのを自分で考えてみたい」と思っていましたｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
