背景
わざとちらつかせて古いテレビ的な表現とかかっこいいですよね。
CSSのみでざっくり作ってみました。
結論
こんな感じです。
See the Pen tiratuki tv by hashito (@hashito) on CodePen.
解説
- 標準の動画は
doga
で表現. - チラつき①は
before
要素で表現 - チラつき②は
after
要素で表現 各チラつきは位置とFilterの値が少しずつ違う様になっていて、1%単位で表示したりしなかったりみたいになっています。 ココらへんの値を変えればもう少しかっこよくなるのかなぁ…
もう少し簡単な書き方
概要
コメントでご指摘を頂いたので、inherit
を利用したほうが簡素にかけるらしい…
inherit
って?→親要素の計算値を引き継ぐ
親…要素…?そもそもbefore
とかって誰の子要素なんだろう…
ということで少し試してみました。
See the Pen inherit test by hashito (@hashito) on CodePen.
まず、クラスt1
で普通の継承の動き。
親要素t1
からt1-1
とt1-1::before
、t1-1::after
に引き継がれています。
まず、クラスt2
でbefore
とafter
への継承の動き。
t2-1
からt2-1::before
、t2-1::after
に引き継がれています。
つまり、before
とafter
は対象要素の子として動いているようです。
最後に、クラスt3
でbefore
からの継承の動き。
どこにも引き継がれていないことが分かります。
つまり、before
→after
とかっていう親子関係はないということですね。
実装
下記の部分を継承するように変更。
background-image: inherit;
width:inherit;
height:inherit;
See the Pen tiratuki tv(inherit) by hashito (@hashito) on CodePen.
こうすると対象要素しか画像に関する情報を入力しなくてすむので、良いですよね!
コメントありがとうございました!