記事内にcssを使って蛍光ペンのアニメーションを表示させる時にbackground-positionの定義で迷った話
蛍光ペンのアニメーションを表示させたい！
いわゆる下のようなやつです。今でこそ、このcssを全記事に適用させたので、すべて蛍光ペンのアニメーションになっていますが、それまでは、蛍光ペンが引かれているのみでした。控えめだけど、もう少し太字を強調したいなあと思っておりました。最近の若者は、流し読みするっていうから、、、
蛍光ペンのアニメーションっていうのはこういうやつです
そこで参考にさせていただいたのが以下のページ。googleで「蛍光ペン アニメーション」とかで検索して出てくる記事のほとんどが参考にしていたページでした。実際、githubにもアップロードしており、コピペでブログをアレンジしているような人とは違って、信憑性がありました。
cssの内容の意味がわからない
しかし、cssの内容がわたしには理解できませんでした。以下が詰まった点です。
- linear-gradientの最初の引数は、leftとto leftで違うのか
- なぜ、background-sizeを2倍にしたあとに、repeat-xなのか
- background-positionが0%→-100%なのか
しかし、詰まった原因の主犯格は最後のbackground-positionでした。これの定義がわからなかったために、上記2つに関してもよくわからなくなり、見返したということになります。
詰まった原因の主犯格「background-positionの定義」
これでした。これが原因でわかりませんでした。わたしの当初のイメージはこうでした。
しかし、実際の定義は以下でした。
ある要素の水平方向（X軸）の background-position を “n%” と指定した場合、その要素の水平方向 n% の座標が「基準点」となり、背景画像は、その画像自体の水平方向 n% の座標が「基準点」と一致するように配置される
https://qiita.com/shouchida/items/19888ee1916321e71cdb
つまり、図にするとこうです。
いやあ、これはわからないわ。
linear-gradientには、leftとto leftがある
background-positionのせいでこれも迷いました。
ん？leftとto leftって同じなのか、いや、違うような。。。いや、でも、左から右のグラデーションで、サイズを2倍にして、ポジションを変えると、、、
って考えたら迷走してました。何度も言いますが、background-positionのせいです。
background-sizeを2倍にしたあとにrepeat-x
これは、cssの性質上、しょうがないことのようですね。blockがあったら、その右端から左方向には背景を作れないので、左端から大きいのを作って、それをリピートしてblockの左側にも作る。そして結局使うのは、左端の左側と、blockの部分ということですね。
