文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 画像のデザイン > ブリンク・点滅

blink 「ブリンク・点滅」 のCSS生成

htmlには<blink>タグがありますが、ブラウザ独自仕様のため一部のブラウザしか動作しません。このため、HTML5の規格では廃止されました。

ブラウザ(html)で、ブリンクを実現するためには「JavaScript」や「CSS(style)」を使用します。当ページでは、CSSを使用する場合のサンプル生成を行っています。

blink 「ブリンク・点滅」を作ろう

「早いブリンク」や「ゆっくりブリンク」など様々なブリンクを自動生成できます。

ブリンク速度
ブリンク間隔
サンプル画像
使用したhtml
<img class="blink" src="img_sample.png" alt="サンプル画像">
生成したCSS
<style type="text/css">
.blink {
  animation: blinkAnime 1s infinite alternate;
}
@keyframes blinkAnime {
    0% {opacity : 1.0;}
  100% {opacity : 0.3;}
}
</style>
「animation」の使い方は以下を参照ください。
animation 「アニメーション」の構文
ページTOP

色々なブリンク

画像の回転

ブリンクではありませんが、画像を目立たせる場合は以下のような回転も有効です。

サンプル画像
<style type="text/css">
.blinkS1 {
  animation: blinkAnimeS1 2s infinite;
}
@keyframes blinkAnimeS1{
  100% {transform: rotateX(360deg);
}
</style>
広告
広告
ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP
広告
生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン