登場と退場 · 出てくる・消える
ぼかしから寄る画像图片模糊聚拢
- まず色が見える
- 内へ収まる
- 余白を見せない
画像はまずぼけた色の塊で、少し拡大しています。そこから鮮明になりながら内へ収まります。「色が分かる」から「細部が見える」へ。内へ収まるので、端に空白が出ません。
使いどころ
大きな写真、商品画像、記事のカバーに向きます。小さなアイコンや即座に出るローカル画像には使わないでください。余分な 700ms は遅く感じさせるだけです。
パラメータ
filter: blur(18px) → blur(0) · transform: scale 1.08 → 1 · 700ms cubic-bezier(.22,1,.36,1) · placeholder fades out in step
レシピ
ぼかしから寄る画像 → filter blur(18px) → blur(0) @ 700ms cubic-bezier(.22,1,.36,1)ぼかしから寄る画像 → scale 1.08 → 1 @ 700ms
AI に渡す一文
この画像を「ぼかし → 鮮明」で読み込ませてください。同じ色調の小さなプレースホルダを下に置き、本画像のデコード後に filter を blur(18px) から 0 へ、scale を 1.08 から 1 へ 700ms cubic-bezier(.22,1,.36,1) で変化させ、同時にプレースホルダをフェードアウトします。内へ収めて、端に空白が出ないようにしてください。