Empfehlen Sie einen coolen blinkenden Alarmknopf

Die Wirkung ist wie folgt:

Der Code lautet wie folgt (klicken Sie, um den Quellcode zu vergrößern und anzuzeigen):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Alarm-Knopf</title>


<style type="text/css">
/* Den gesamten Stylesheet-Code hier einfügen */
Körper { Hintergrund: #333; Textschatten: 0 1px 1px rgba(0,0,0,.5); }


@-webkit-keyframes bigAssButtonPulse {
  von { Hintergrundfarbe: #1e6a0f; -webkit-box-shadow: 0 0 25px #333; }
  50 % { Hintergrundfarbe: #39ba1f; -webkit-box-shadow: 0 0 75px #39ba1f; }
  zu { Hintergrundfarbe: #1e6a0f; -webkit-box-shadow: 0 0 25px #333; }
}

@-webkit-keyframes greenPulse {
  von { Hintergrundfarbe: #1e6a0f; -webkit-box-shadow: 0 0 9px #333; }
  50 % { Hintergrundfarbe: #39ba1f; -webkit-box-shadow: 0 0 27px #39ba1f; }
  zu { Hintergrundfarbe: #1e6a0f; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes bluePulse {
  von { Hintergrundfarbe: #036075; -webkit-box-shadow: 0 0 9px #333; }
  50 % { Hintergrundfarbe: #2daebf; -webkit-box-shadow: 0 0 27px #2daebf; }
  zu { Hintergrundfarbe: #036075; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes redPulse {
  von { Hintergrundfarbe: #8c2305; -webkit-box-shadow: 0 0 9px #333; }
  50 % { Hintergrundfarbe: #e33100; -webkit-box-shadow: 0 0 27px #e33100; }
  zu { Hintergrundfarbe: #8c2305; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes magentaPulse {
  von { Hintergrundfarbe: #470123; -webkit-box-shadow: 0 0 9px #333; }
  50 % { Hintergrundfarbe: #a9014b; -webkit-box-shadow: 0 0 27px #a9014b; }
  zu { Hintergrundfarbe: #470123; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes orangePulse {
  von { Hintergrundfarbe: #b84c04; -webkit-box-shadow: 0 0 9px #333; }
  50 % { Hintergrundfarbe: #ff5c00; -webkit-box-shadow: 0 0 27px #ff5c00; }
  zu { Hintergrundfarbe: #b84c04; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes orangeellowPulse {
  von { Hintergrundfarbe: #bd5000; -webkit-box-shadow: 0 0 9px #333; }
  50 % { Hintergrundfarbe: #ffb515; -webkit-box-shadow: 0 0 27px #ffb515; }
  zu { Hintergrundfarbe: #bd5000; -webkit-box-shadow: 0 0 9px #333; }
}

ein.Knopf {
    -Webkit-Animationsdauer: 2 s;
    -webkit-animation-iteration-count: unendlich; 
}

.green.button { -webkit-animation-name: greenPulse;Animationsname: greenPulse; -webkit-animation-duration: 2s;Animationsdauer: 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; }
.orangellow.button { -webkit-animation-name: orangelPulse; -webkit-animation-duration: 2s; }

.wall-of-buttons { Breite: 100 %; Höhe: 500px; Textausrichtung: Mitte; }
.wall-of-buttons a.button { Anzeige: Inline-Block; Rand: 0 30px 30px 0; } 

/* Spielplatz.css */
.Button #222 URL (Overlay-Button) ; ;
Schaltfläche::-moz-focus-inner { Rahmen: 0; Polsterung: 0; }

.button:hover { Hintergrundfarbe: #111; Farbe: #fff; }
.button:aktiv { -webkit-transform: übersetzenY(1px); -moz-transform: übersetzenY(1px); }
/* Kleine Schaltflächen */
.small.button { Schriftgröße: 11px; }
/* Große Schaltflächen */
.large.button { Schriftgröße: 14px; Polsterung: 8px 19px 9px; }
/* Farben für unsere geliebten Knöpfe */
.grüner.Knopf { Hintergrundfarbe: #91bd09; }
.grüner.Button:hover { Hintergrundfarbe: #749a02; }
.blue.button { Hintergrundfarbe: #2daebf; }
.blau.button:hover { Hintergrundfarbe: #007d9a; }
.red.button { Hintergrundfarbe: #e33100; }
.red.button:hover { Hintergrundfarbe: #872300; }
.magenta.button{ Hintergrundfarbe: #a9014b; }
.magenta.button:hover { Hintergrundfarbe: #630030; }
.orange.button {Hintergrundfarbe: #ff5c00;}
.orange.button:hover { Hintergrundfarbe: #d45500; }
.orangellow.button { Hintergrundfarbe: #ffb515; }
.orangellow.button:hover { Hintergrundfarbe: #fc9200; }
.white.button { Hintergrundfarbe: #fff; Rahmen: 1px durchgezogen #ccc; Farbe: #666 !wichtig; Schriftstärke: normal; Textschatten: 0 1px 1px rgba(255,255,255,1); }
.weißer.Button:hover { Hintergrundfarbe: #eee; }
</Stil>

</Kopf>

<body id="radioactiveButtonsPage" class="Chrome Windows">

<div Klasse="Knopfwand">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
    <p><a class="großer grüner Knopf">Normal</a>
      <a class="großer blauer Knopf">Ausführen</a>
      <a class="großer roter Knopf">Schwer</a>
      <br />
      
      <a class="großer orangefarbener Knopf">Hauptseite</a>
      <a class="großer orangegelber Knopf">Sekundär</a>
      <br />
  </p>
</div>

</body>
</html>

Zusammenfassen

Das Obige ist meine Empfehlung für einen coolen blinkenden Alarmknopf. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Detaillierte Erklärung der Lösung des Problems des Zusammenführens von Zeilen und Spalten in Tabellen in HTML

>>: So verwenden Sie Typescript zum Kapseln von lokalem Speicher