雰囲気と背景 · ページの空気
走る縁取り描边流光
- 高級感
- 方向性
- 持続
短い光の帯がカードの縁を一周し、後ろにぼけた尾を引きます。塗りと文字はまったく動かず、動くのは縁だけなので、読み心地を邪魔せずに「このカードは生きている」と言い続けられます。
使いどころ
「押せて、しかも押す価値がある」1 枚に使います。会員カード、開催中のキャンペーン、ファーストビューの主アクションなどです。1 画面に 1 つまでにしてください。2 つ並ぶと目が片方だけを選び、もう片方は無駄になります。見せるだけのカードやリストの行には使わないでください。強調すべきものがありません。
パラメータ
stroke-dasharray 16% of perimeter · 0.13px/ms travel · linear, constant speed · glow blur 5px · head 1.6px + drop-shadow
レシピ
走る縁取り → stroke-dasharray 16% of perimeter · 0.13px/ms travel · linear, constant speed · glow blur 5px · head 1.6px + drop-shadow
AI に渡す一文
このカードの縁に流れる光を追加してください。SVG の stroke-dasharray で周長の 16% だけ切り出し、stroke-dashoffset を等速で減らしてその区間をカードの周りに走らせます。3 層重ねます。下は元の 1px の静的などう線、真ん中は強調色 3px に 5px のぼかし、一番上は白 1.6px に少し外側の発光を付けた「頭」です。角は 4 本の直線で組まず、パスに沿って dash を曲げてください。