JSFiddle であそぼう
JSFiddle で変なの作って遊んでます。たのしい。
ハンドスピナー
ボタンを押すと回るやつ。
回転時間の計算が、結局正解が分からず適当な式に。
本来はどういう計算になるのやら…。
単語帳っぽいの
単語帳をパラパラ~っとめくる感じのやつ。
角度の計算は例によって適当。
数学きちんとやらないと、こういう時に苦労するんだなぁ…と思った次第。
技術的なお話: 単語帳の穴
単語の穴を開けるのに無駄に苦労した。
何通りか方法があるようだけど、思い付いたのは3つほど。
背景を透明に& border で背景色を指定
ソースはここ → https://jsfiddle.net/m_kahmin/Lhjaj0vh/14/
ポイントは以下の通り。
background-color: transparent;
とborder-radius: 50%;
で透明な穴を表現。:before
には極太 border を指定して、背景色を表現。:after
には1px の border を指定して、縁取りを表現。
動的に色を変える場合は、 :before
:after
といった疑似要素ではなく
span
など別の子要素を用意する必要がありそう。
radial-gradient で背景を指定
ソースはここ → https://jsfiddle.net/m_kahmin/Lhjaj0vh/23/
radial-gradient で順番に色をつけるだけ。
- 中央は透明の穴。
- その外側1pxは縁取り。
- さらに外側は背景色。
SVG を背景にする
SVGで穴の空いた背景を作れば、どうにでもなるんじゃないですかね(適当)
動的に色を変えるのも、問題なくイケるはず。
今知ったけど、マスク機能なんてのもあるらしい。 ブラウザの対応状況がイマイチだけど、数年のうちには使えるのかなぁ。