cman.jpblink 「ブリンク・点滅」 の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 「アニメーション」の構文
animation 「アニメーション」の構文
色々なブリンク
画像の回転
ブリンクではありませんが、画像を目立たせる場合は以下のような回転も有効です。
<style type="text/css"> .blinkS1 { animation: blinkAnimeS1 2s infinite; } @keyframes blinkAnimeS1{ 100% {transform: rotateX(360deg); } </style>
広告
広告
注意事項
CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。
「animation」の使い方は以下を参照ください。
animation 「アニメーション」
広告
| 生成できるホームページ・パーツ一覧 | |
 文字のデザイン | |
 画像のデザイン | |
 ボタンのデザイン | |
 入力項目のデザイン | |
 テーブルのデザイン | |
 BOXのデザイン | |
 吹き出しのデザイン | |
 ページのデザイン | |
 図形のデザイン | |
| ご利用時の注意事項・制約事項 | |
| よくあるご質問 | |
| 何で無料なの？ | |
| 生成コードに利用制限はある？ | |
| 生成コードに保証はある？ | |
| jQueryで生成できない？ | |
広告
広告
スマートフォン・タブレット | 運営:株式会社シーマン |