キラッと光るテキストのCSSデザインサンプル集

2021-02-12CSS テキストデザイン サンプル集,CSS

CSSでテキストをキラッと光らせるデザインのサンプル集です。

キラッと光るテキスト（左から右へ）

キラッと光るテキストのCSSデザインサンプルです。

左から右へ、animationを利用して白いグラデーションを走らせています。

See the Pen CSS | Border inside with outline A by yochans (@yochans) on CodePen.

<div class="container">
		<p class="text">ONE NOTES</p>
</div>

.text{
	padding: 10px 0;
	margin: 0;
	font-size: 80px;
	font-weight: bold;
	background-image: linear-gradient(
		70deg,
		#dc143c 45%, /* font color */
		#FFF 50%,
		#dc143c 55% /* font color */
	);
	background-size: 500% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: shine 2s infinite;
}

@keyframes shine {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

テキスト色と光のグラデーション部分。

「deg」を調節することで光の角度を変更できます。
グラデーションは「文字色ー光の色ー文字色」で指定しています。

	background-image: linear-gradient(
		70deg,
		#dc143c 48%, /* font color */
		#FFF 50%,
		#dc143c 52% /* font color */
	);
	background-size: 500% 100%;

テキストの切抜きにて必要な部分

	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;

@keyframes、0％と100％を逆にする事で右から左への光に変更可能です。

@keyframes shine {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

キラッと光るテキスト（上から下へ）

上から下へキラッと光るテキストのCSSデザインサンプルです。

CSSの作りも殆ど同じです。

See the Pen CSS | Shine Text design （top to bottom） by yochans (@yochans) on CodePen.

<div class="container">
		<p class="text">ONE NOTES</p>
</div>
<div class="container dark">
		<p class="text">ONE NOTES</p>
</div>

左から右へと違う部分は「background-size」と@keyframesでの「background-position」だけです。

@keyframesの0％と100％を逆にすることで、下から上への光の移動に変更可能です。

.text{
	padding: 10px 0;
	margin: 0;
	font-size: 80px;
	font-weight: bold;

	background-image: linear-gradient(
		0deg,
		#dc143c 45%, /* font color */
		#FFF 50%,
		#dc143c 55% /* font color */
	);
	background-size: 100% 400%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: shine 2s infinite;
}

@keyframes shine {
	0% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 100% 0%;
	}
}