CSSでチラつき表現

背景

わざとちらつかせて古いテレビ的な表現とかかっこいいですよね。
CSSのみでざっくり作ってみました。

こんな感じです。

See the Pen tiratuki tv by hashito (@hashito) on CodePen.

##解説

標準の動画はdogaで表現.
チラつき①はbefore要素で表現
チラつき②はafter要素で表現
各チラつきは位置とFilterの値が少しずつ違う様になっていて、１%単位で表示したりしなかったりみたいになっています。
ココらへんの値を変えればもう少しかっこよくなるのかなぁ…

コメントでご指摘を頂いたので、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は対象要素の子として動いているようです。

最後に、クラスt３でbeforeからの継承の動き。
どこにも引き継がれていないことが分かります。
つまり、before→afterとかっていう親子関係はないということですね。

下記の部分を継承するように変更。

main

1
2
3

background-image: inherit;    
width:inherit;  
height:inherit;

こうすると対象要素しか画像に関する情報を入力しなくてすむので、良いですよね！
コメントありがとうございました！