CSSを使用した点滅するテキストの例

2024-03-14 12:24 CSS点滅するテキストアニメーション

まず、点滅するテキストを作成するための基本的なCSSコードを紹介します。

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.blinking-text {
  animation: blink 1s infinite;
}

上記のCSSコードでは、@keyframesルールを使用してblinkというアニメーションを定義しています。このアニメーションは、テキストの不透明度（opacity）を0から1へ変化させることで点滅効果を作り出します。

次に、.blinking-textというクラスを作成し、animationプロパティを使用してblinkアニメーションを適用しています。1sはアニメーションの時間を指定しており、infiniteはアニメーションを繰り返すことを意味しています。

この基本的なCSSコードを使用すると、HTML要素に.blinking-textクラスを追加するだけで、点滅するテキストを実装することができます。

以下はHTMLの例です。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1 class="blinking-text">点滅するテキストの例</h1>
  <p>このテキストは点滅します。</p>
</body>
</html>

上記の例では、<h1>要素に.blinking-textクラスを追加しています。これにより、<h1>要素内のテキストが点滅する効果が得られます。

このように、CSSを使用して点滅するテキストを作成することができます。さまざまな要素やスタイルに適用することができるため、Webデザインにおいて興味深い効果を追加する手段の一つです。