PURE CSS GALLERY

CSSだけで動くアート集

すべての作品はHTMLとCSSのみで動作します（JavaScriptゼロ縛り）。各作品は@propertyや:has()、コンテナクエリといったモダンCSS機能のリファレンス実装を兼ねており、コード全文と対応ブラウザ情報を添えて展示しています。

ネオンの雨

都市夜景にネオン光の雨が降りしきる。@propertyで型付けした角度カスタムプロパティをアニメーションし、conic-gradientの看板とhue-rotateで色相が巡る。

@propertyconic-gradient()hue-rotate()

反応する庭

チェックボックスとラジオボタンの状態に:has()で庭全体が応答する。夜にすれば月が昇り、札を選べば花が咲く。JavaScriptは一切使っていない。

:has():checked

枠の右下ハンドルをドラッグして、器の幅を変えてください

芒に月

同じ一枚の札が、器の幅で花札風と短冊風に姿を変えます。

container query

お使いのブラウザはコンテナクエリに未対応のため、札のレイアウトは変化しません。

操作できます

器で変わる札

同じ一枚の札が、器（コンテナ）の幅によって花札風と短冊風にレイアウトを変える。リサイズハンドルはCSSのresizeプロパティのみで実現。

Container Queriesresize

純CSS太陽系

transform-style: preserve-3dによる惑星軌道儀。軌道の傾き・公転・自転をすべてCSSアニメーションで表現し、ホバーすると時が止まる。

3D Transformsanimation-play-state

変化する紋

家紋風の図形が丸・花・星・亀甲へとモーフィングを続ける。同じ頂点数のclip-path: polygon()同士を補間し、@propertyで色相も同時に巡らせる。

clip-path@property

硝子の錦鯉

曇り硝子の向こうを錦鯉が泳ぐ。offset-pathのモーションパスで泳跡を描き、backdrop-filterの硝子とmaskの光模様が水面を作る。

backdrop-filteroffset-pathmask

文字織り

background-clip: textで文字に織り目の模様を流し、可変フォントのfont-variation-settingsで太さが糸のようにうねる。

background-clip: textfont-variation-settings

方丈記

ゆく河の流れは絶えずして、しかももとの水にあらず。よどみに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。世の中にある人とすみかと、またかくのごとし。

たましきの都のうちに、棟を並べ、甍を争へる、高き、卑しき、人の住まひは、世々を経て尽きせぬものなれど、これをまことかと尋ぬれば、昔ありし家はまれなり。或いは去年焼けて今年作れり。或いは大家滅びて小家となる。住む人もこれに同じ。所も変はらず、人も多かれど、いにしへ見し人は、二、三十人が中に、わづかにひとりふたりなり。朝に死に、夕べに生まるるならひ、ただ水の泡にぞ似たりける。

知らず、生まれ死ぬる人、いづかたより来たりて、いづかたへか去る。また知らず、仮の宿り、誰がためにか心を悩まし、何によりてか目を喜ばしむる。その、主人と栖と、無常を争ふさま、いはばあさがほの露に異ならず。

或いは露落ちて花残れり。残るといへども朝日に枯れぬ。或いは花しぼみて露なほ消えず。消えずといへども夕べを待つことなし。

ここまで読み進めたぶんだけ、右の蝋燭は短くなっています。スクロール位置と蝋燭の長さは、scroll-timelineとanimation-timelineだけで同期しています。

（了）

お使いのブラウザはスクロール駆動アニメーションに未対応のため、蝋燭は燃え進みません。

スクロールで反応

読了の灯

文章を読み進めると和蝋燭が燃え進む読了プログレス。scroll-timelineとanimation-timelineだけでスクロール量と蝋燭の長さを同期させる。

Scroll-driven Animations