2022年10月29日(土)

CSSのみで昔のフィルム映像みたいなアニメーションノイズ

• 0
• 0
• 21
• 17

Result

See the Pen
Old Film Effect – Pure CSS Animation by kachibito (@kachibito)
on CodePen.

👆 こういうやつをCSSだけで実装する、みたいなやつです。セピア込みVer.もありました。

動画の上にかぶせればJS不要で古い映像みたいな演出が出来ますね。

css

:root { --trsn: all 0.5s ease 0s; --black: #000; } *, *:before, *:after { position: absolute; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--black); perspective: 100vmin; } .content { width: 100vw; ...