CSS のみで文字を動かしてホラー感を出してみた

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 16:57

ただいまコメントを受けつけておりません。

CSS のみで文字を動かしてホラー感を出してみた

だいぶ気持ち悪い演出を作れた。こちら

書いた html と css は以下

/** CSS **/
span .char {
	--delay: calc((var(--char-index) + 1) * 400ms);
	animation: breathe 4000ms infinite both;
	animation-delay: var(--delay);
}

@keyframes breathe {
	0% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
		font-size: 100%;
	}
	60% {
		font-variation-settings: 'wght' 700, 'wdth' 100;
		font-size: 120%;
	}
	
	100% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
		font-size: 100%;
	}
}

/** html **/
<span class="char">こ</span><span class="char" style="-char-index:0;">の</span><span class="char" style="-char-index:1;">文</span><span class="char" style="-char-index:2;">を</span><span class="char" style="-char-index:3;">読</span><span class="char" style="-char-index:4;">み</span><span class="char" style="-char-index:5;">上</span><span class="char" style="-char-index:6;">げ</span><span class="char" style="-char-index:7;">た</span><span class="char" style="-char-index:8;">者</span><span class="char" style="-char-index:9;">に</span><span class="char" style="-char-index:10;">死</span><span class="char" style="-char-index:11;">を</span>