推薦一款酷炫閃爍的告警按鈕

-Advertisement-

效果如下：代碼如下(點擊可展開查看源碼)： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset= ...

效果如下：

代碼如下(點擊可展開查看源碼)：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>告警按鈕</title>


<style type="text/css">
/* Place all stylesheet code here */
body { background: #333; text-shadow: 0 1px 1px rgba(0,0,0,.5); }


@-webkit-keyframes bigAssButtonPulse {
  from { background-color: #1e6a0f; -webkit-box-shadow: 0 0 25px #333; }
  50% { background-color: #39ba1f; -webkit-box-shadow: 0 0 75px #39ba1f; }
  to { background-color: #1e6a0f; -webkit-box-shadow: 0 0 25px #333; }
}

@-webkit-keyframes greenPulse {
  from { background-color: #1e6a0f; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #39ba1f; -webkit-box-shadow: 0 0 27px #39ba1f; }
  to { background-color: #1e6a0f; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes bluePulse {
  from { background-color: #036075; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #2daebf; -webkit-box-shadow: 0 0 27px #2daebf; }
  to { background-color: #036075; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes redPulse {
  from { background-color: #8c2305; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #e33100; -webkit-box-shadow: 0 0 27px #e33100; }
  to { background-color: #8c2305; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes magentaPulse {
  from { background-color: #470123; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #a9014b; -webkit-box-shadow: 0 0 27px #a9014b; }
  to { background-color: #470123; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes orangePulse {
  from { background-color: #b84c04; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #ff5c00; -webkit-box-shadow: 0 0 27px #ff5c00; }
  to { background-color: #b84c04; -webkit-box-shadow: 0 0 9px #333; }
}

@-webkit-keyframes orangellowPulse {
  from { background-color: #bd5000; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #ffb515; -webkit-box-shadow: 0 0 27px #ffb515; }
  to { background-color: #bd5000; -webkit-box-shadow: 0 0 9px #333; }
}

a.button {
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite; 
}

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

.wall-of-buttons { width: 100%; height: 500px; text-align: center; }
.wall-of-buttons a.button { display: inline-block; margin: 0 30px 30px 0; } 

/*   playground.css   */
.button { background: #222 url(overlay-button.png) repeat-x 0 0; display: inline-block; padding: 5px 15px 6px; color: #fff !important; font-size: 13px; font-weight: bold; line-height: 1; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; overflow: visible; width: auto; }
button::-moz-focus-inner { border: 0; padding: 0; }

.button:hover { background-color: #111; color: #fff; }
.button:active { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); }
/* Small Buttons */
.small.button { font-size: 11px; }
/* Large Buttons */
.large.button { font-size: 14px; padding: 8px 19px 9px; }
/* Colors for our beloved buttons */
.green.button { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.blue.button { background-color: #2daebf; }
.blue.button:hover { background-color: #007d9a; }
.red.button { background-color: #e33100; }
.red.button:hover { background-color: #872300; }
.magenta.button{ background-color: #a9014b; }
.magenta.button:hover { background-color: #630030; }
.orange.button {background-color: #ff5c00;}
.orange.button:hover { background-color: #d45500; }
.orangellow.button { background-color: #ffb515; }
.orangellow.button:hover { background-color: #fc9200; }
.white.button { background-color: #fff; border: 1px solid #ccc; color: #666 !important; font-weight: normal; text-shadow: 0 1px 1px rgba(255,255,255,1); }
.white.button:hover { background-color: #eee; }
</style>

</head>

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

<div class="wall-of-buttons">
  <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 orangellow button">次要</a>
      <br />
  </p>
</div>

</body>

</html>

View Code

預覽地址：https://hoosson.github.io/button.html

button.html 進入

ending...

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

day 42

[TOC] 前端什麼是前端任何與用戶直接打交道的操作界面都可以稱之為前端 eg：電腦界面手機界面平板界面什麼是後端真正的幕後操作者 web服務的本質請求響應瀏覽器輸入網址回車發生了哪些事 1.朝著指定的伺服器地址發送請求 2.服務端接收請求並處理 3.返回相應的響應 4.瀏覽 ...
vue-cli3和element做一個簡單的登陸頁面

1.先用vue-cli3創建一個項目 2.安裝element模塊全局安裝 npm i element-ui -S 3在main.js引入模塊 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.c ...
jquery獲取input輸入框中的值

如何用javascript獲取input輸入框中的值，js/jq通過name或id獲取輸入框value值 ...
小程式如何實現rem

最近在學習小程式，要把html的代碼轉換成小程式界面，其中就遇到了rem的轉換問題，但小程式不太相容rem，不是不能用rem，而是沒辦法設置根元素的font-size，因為rem是相對於根元素的font-size，而小程式的根元素font-size一直是16px。既然我設置了page{ font-s ...
打開文件報“EFailed to load resource: net::ERR_FILE_NOT_FOUND”錯誤

類似這樣：引入文件的路徑錯誤 ...
8.Javascript-map、reduce、filter 等高階函數

高階函數高階函數是對其他函數進行操作的函數，可以將它們作為參數或通過返回它們。簡單來說，高階函數是一個函數，它接收函數作為參數或將函數作為輸出返回。例如Array.prototype.map，Array.prototype.filter並且Array.prototype.reduce是一些高階功 ...
7.JavaScript-Promise的並行和串列

Promise 並行 Promise.all是所有的Promise執行完畢後（reject|resolve）返回一個Promise對象。最近在開發一個項目中，需要等介面拿到全部數據後刷新頁面，取消loding效果 1 // 項目中請求介面 2 function getShowProject(res ...
react新版本配置代理

新學習react 開始配置react跨域的時候在網上查看到是在packjson.json裡面添加如下代碼： 1 "proxy": { 2 "/api": { 3 "target": "http://localhost:8080" 4 }, 5 } 但是啟動項目之後報錯：後來在網上查找錯誤，發現r ...