クールな点滅アラームボタンをおすすめします

効果は以下のとおりです。

コードは次のとおりです (クリックすると展開してソースコードが表示されます)。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>アラームボタン</title>


<スタイル タイプ="text/css">
/* すべてのスタイルシートコードをここに配置します */
本文 { 背景: #333; テキストシャドウ: 0 1px 1px rgba(0,0,0,.5); }


@-webkit-keyframes bigAssButtonPulse {
  { 背景色: #1e6a0f; -webkit-box-shadow: 0 0 25px #333; } から
  50% { 背景色: #39ba1f; -webkit-box-shadow: 0 0 75px #39ba1f; }
  { background-color: #1e6a0f; -webkit-box-shadow: 0 0 25px #333; } に変更
}

@-webkit-keyframes グリーンパルス {
  { 背景色: #1e6a0f; -webkit-box-shadow: 0 0 9px #333; } から
  50% { 背景色: #39ba1f; -webkit-box-shadow: 0 0 27px #39ba1f; }
  { 背景色: #1e6a0f; -webkit-box-shadow: 0 0 9px #333; } に変更
}

@-webkit-keyframes bluePulse {
  { 背景色: #036075; -webkit-box-shadow: 0 0 9px #333; } から
  50% { 背景色: #2daebf; -webkit-box-shadow: 0 0 27px #2daebf; }
  { background-color: #036075; -webkit-box-shadow: 0 0 9px #333; } に変更
}

@-webkit-keyframes redPulse {
  { 背景色: #8c2305; -webkit-box-shadow: 0 0 9px #333; } から
  50% { 背景色: #e33100; -webkit-box-shadow: 0 0 27px #e33100; }
  { background-color: #8c2305; -webkit-box-shadow: 0 0 9px #333; } に変更
}

@-webkit-keyframes マゼンタパルス {
  { 背景色: #470123; -webkit-box-shadow: 0 0 9px #333; } から
  50% { 背景色: #a9014b; -webkit-box-shadow: 0 0 27px #a9014b; }
  { background-color: #470123; -webkit-box-shadow: 0 0 9px #333; } に変更
}

@-webkit-keyframes オレンジパルス {
  { 背景色: #b84c04; -webkit-box-shadow: 0 0 9px #333; } から
  50% { 背景色: #ff5c00; -webkit-box-shadow: 0 0 27px #ff5c00; }
  { background-color: #b84c04; -webkit-box-shadow: 0 0 9px #333; } に変更
}

@-webkit-keyframes オレンジローパルス {
  { 背景色: #bd5000; -webkit-box-shadow: 0 0 9px #333; } から
  50% { 背景色: #ffb515; -webkit-box-shadow: 0 0 27px #ffb515; }
  { background-color: #bd5000; -webkit-box-shadow: 0 0 9px #333; } に変更
}

a.ボタン{
    -webkit アニメーション期間: 2 秒;
    -webkit-アニメーションの反復回数: 無限; 
}

.green.button { -webkit-animation-name: greenPulse;アニメーション名: greenPulse; -webkit-animation-duration: 2s;アニメーション期間: 2s; }
.blue.button { -webkit-animation-name: bluePulse; -webkit-animation-duration: 2s; }
.red.button { -webkit-animation-name: redPulse; -webkit-animation-duration: 2s; }
.magenta.button { -webkit-animation-name: magentaPulse; -webkit-animation-duration: 2s; }
.orange.button { -webkit-animation-name: orangePulse; -webkit-animation-duration: 2s; }
.orangelow.button { -webkit-animation-name: orangellowPulse; -webkit-animation-duration: 2s; }

.wall-of-buttons { 幅: 100%; 高さ: 500px; テキスト配置: center; }
.wall-of-buttons a.button { display: inline-block; margin: 0 30px 30px 0; } 

/* プレイグラウンド.css */
Button {＃222 url.px 0; X-Moz-Box-Shadow：0,0,0.25）。 ;
ボタン::-moz-focus-inner { 境界線: 0; パディング: 0; }

.button:hover { 背景色: #111; 色: #fff; }
.button:active { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); }
/* 小さなボタン */
.small.button { フォントサイズ: 11px; }
/* 大きなボタン */
.large.button { フォントサイズ: 14px; パディング: 8px 19px 9px; }
/* 私たちのお気に入りのボタンの色 */
.green.button { 背景色: #91bd09; }
.green.button:hover { 背景色: #749a02; }
.blue.button { 背景色: #2daebf; }
.blue.button:hover { 背景色: #007d9a; }
.red.button { 背景色: #e33100; }
.red.button:hover { 背景色: #872300; }
.magenta.button{ 背景色: #a9014b; }
.magenta.button:hover { 背景色: #630030; }
.orange.button {背景色: #ff5c00;}
.orange.button:hover { 背景色: #d45500; }
.orangelow.button { 背景色: #ffb515; }
.orangelow.button:hover { 背景色: #fc9200; }
.white.button { 背景色: #fff; 境界線: 1px solid #ccc; 色: #666 !important; フォントの太さ: normal; テキストの影: 0 1px 1px rgba(255,255,255,1); }
.white.button:hover { 背景色: #eee; }
</スタイル>

</head>

<body id="radioactiveButtonsPage" class="chrome windows">

<div class="ボタンの壁">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
    <p><a class="large green button">通常</a>
      <a class="large blue button">実行</a>
      <a class="large red button">重度</a>
      <br />
      
      <a class="large orange button">メイン</a>
      <a class="large orangelow button">セカンダリ</a>
      <br />
  </p>
</div>

</本文>
</html>

要約する

上記は、クールな点滅アラームボタンの私の推奨事項です。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: Typescriptを使用してローカルストレージをカプセル化する方法

>>: HTML で入力プロンプトのテキストスタイルを変更するためのサンプルコード