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

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

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

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

<!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 で入力プロンプトのテキスト スタイルを変更するためのサンプル コード

推薦する

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします

目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...

Docker-compose ワンクリックデプロイ gitlab 中国語版の方法手順

1. GitLabの紹介Gitlab 公式アドレス: https://about.gitlab.co...

vue3.2 で追加された defineCustomElement の基本原理の詳細な説明

目次Webコンポーネントカスタム要素概要HTMLTemplateElement コンテンツ テンプレ...

aタグに下線を付け、クリック前後で色を変える方法

コードをコピーコードは次のとおりです。リンクフォントサイズ: 12px;色: #000000;テキス...

MySQL ログインおよび終了コマンドの形式

mysql ログインのコマンド形式は次のとおりです。 mysql -h [hostip] -u [ユ...

フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する

コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...

Nginx コンパイル済み nginx - 新しいモジュールを追加

1. 既存のモジュールを表示する nginx の sbin ディレクトリに nginx の sbin...

シーケンス関数を実装する MySQL コード

MySQLはシーケンス関数を実装する1. シーケンスレコードテーブルを作成する テーブル `sys_...

Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...

ウェブページの画像を素早く表示する方法とテクニック

1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

Linux で MySQL をインストールする簡単な方法

Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...

Vue の get リクエストと post リクエストの違いのまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

MySQL公式エクスポートツールmysqlpumpの使用

目次導入説明書実際の経験長所と短所総括する導入mysqlpump は mysqldump の派生です...