2. 程式人生 > >動態變化的按鈕，按鈕漸變色，動態變化顏色

動態變化的按鈕，按鈕漸變色，動態變化顏色

阿新 • • 發佈：2018-11-29
效果如圖：
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="keywords" content="radioactive buttons, rgba buttons, CSS3 buttons, animated css buttons" />
<meta name="description" content="Create killer button focus effects using some very simple RGBa colors and -webkit-animations." /> </head> <style> .transparent.header { background: #333; } section[role="main"] { background: #333;
color: #fff; } section[role="main"] h1 { color: #fff; } section[role="main"] h2 { color: #fff; } section[role="main"] h3 { color: #fff; } .button { margin-right: 0.5em; border-radius: 4px; } ol {
margin-left: 2em; } div#sidebarAd.cleanslate { background: #444 !important; color: #fff !important; } div#sidebarAd.cleanslate .ad-sponsor { color: #ccc !important; } .zurb-footer-top { background: #222; }
@-webkit-keyframes bigAssButtonPulse { from { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; } 50% { background-color: #91bd09; -webkit-box-shadow: 0 0 50px #91bd09; } to { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; } }
@-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; } to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; } }
@-webkit-keyframes bluePulse { from { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px #2daebf; } to { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; } }
@-webkit-keyframes redPulse { from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #e33100; -webkit-box-shadow: 0 0 18px #e33100; } to { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; } }
@-webkit-keyframes magentaPulse { from { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #a9014b; -webkit-box-shadow: 0 0 18px #a9014b; } to { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; } }
@-webkit-keyframes orangePulse { from { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #ff5c00; -webkit-box-shadow: 0 0 18px #ff5c00; } to { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; } }
@-webkit-keyframes orangellowPulse { from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515; } to { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; } }
a.button { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; }
.green.button { -webkit-animation-name: greenPulse; -webkit-animation-duration: 3s; } .blue.button { -webkit-animation-name: bluePulse; -webkit-animation-duration: 4s; } .red.button { -webkit-animation-name: redPulse; -webkit-animation-duration: 1s; } .magenta.button { -webkit-animation-name: magentaPulse; -webkit-animation-duration: 2s; } .orange.button { -webkit-animation-name: orangePulse; -webkit-animation-duration: 3s; } .orangellow.button { -webkit-animation-name: orangellowPulse; -webkit-animation-duration: 5s; }
.wall-of-buttons { text-align: center; margin-top: 2em; margin-bottom: 2em; } </style> <body> <div class="row"> <div class="large-12 columns wall-of-buttons"> <a class="green button">Look at me!</a> <a class="blue button">Click me!</a> <a class="magenta button">Hi ho, Silver!</a> <a class="green button">Look at me!</a> <a class="red button">I'm Glowing!</a> <a class="magenta button">Hi ho, Silver!</a> <a class="orange button">Call to Action</a> <a class="magenta button">Hi ho, Silver!</a> <a class="green button">Look at me!</a> <a class="orangellow button">Got clicks?</a> <a class="blue button">Click me!</a> <a class="red button">I'm Glowing!</a> <a class="blue button">Click me!</a> <a class="magenta button">Hi ho, Silver!</a> <a class="orangellow button">Got clicks?</a> <a class="red button">I'm Glowing!</a> <a class="orange button">Call to Action</a> <a class="green button">Look at me!</a> <a class="orangellow button">Got clicks?</a> <a class="red button">I'm Glowing!</a> <a class="blue button">Click me!</a> <a class="orangellow button">Got clicks?</a> <a class="blue button">Click me!</a> <a class="red button">I'm Glowing!</a> <a class="orange button">Call to Action</a> <a class="orangellow button">Got clicks?</a> </div> </div> </body> </html>

相關推薦

動態變化的按鈕，按鈕漸變色，動態變化顏色

效果如圖： <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" conten

折線和柱形綜合圖，漸變色，造成tooltip小標籤顏色取值不按照series.color顯示

折線和柱形綜合圖，均設定漸變色，此時tooltip小標籤顏色取值不按照series.color顯示 1、series.color=[ 'red' , 'yellow' ]，不設定漸變色，折線和柱子依次取值 2、柱子設定漸變色後，柱子的tooltip小標籤顏色取設定的漸變色； 3、折線

css實現漸變色，從做到右，從上到下

1，從左到右的漸變色： background:#74F195; background:-webkit-linear-gradient(left,#74F195,#C8FF9A); background:-o-linear-gradient(right,#74F195,#

【乾貨】CSS實現漸變色，詳解

希望通過這個例子，讓大家以後遇到漸變色的需求時都能從容應對：background: linear-gradient( 角度 ,起始色 0%【起始色遊標】, 結束色 0%【結束色遊標】);兩遊標之間為漸變色，當結束色遊標在起始色遊標之前時，以起始色遊標為準。#34d058 與 

HTML5 canvas圖形繪製基礎(矩形，線條，漸變色，圓形，圖片，多邊形)

<!DOCTYOE html> <html>    <head>    <meta charset="utf-8">    <style type="text/css">    div{    margin-lef

操作gridview，選中行時改變背景色且checkbox被選中，隔行變色，全選變色

 css:<style type="text/css"> .checked { background: #c0c0ff; } .odd { background: #72FE95; } .even { background: #B8E2E

點擊按鈕變色，松開按鈕恢復原來的顏色

寫法 效果 log -1 http 新建 idt 方法 com 　　安卓軟件中有這樣一種效果：假設一個按鈕是綠色，當你點擊時變成黃色，松開時又變回綠色。現在介紹怎麽實現這種效果 第一種方法：資源文件寫法 　　在主布局文件中定義一個按鈕 　　然後在value文件夾下的c

有多個按鈕，點擊一個變色，點擊另一個變色，原來的恢復顏色的方法

click dcl 多個 cti 方法 fault tar span 變色 <a class="btn btn-default changChick" onclick="changChick(this)">高</a> <a class="btn

Jquery滑鼠點選後變色，點選另一個按鈕顏色還原

轉載一個！ Jquery滑鼠點選後變色，點選另一個按鈕顏色還原 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

實現一個可動態擴充套件的，按鈕突出可變的，安卓底部選單導航欄

  所謂贈人玫瑰，手留餘香！非常感謝無私奉獻的前輩們。之前在練習安卓的底部狀態列的時候，看到前輩的一個帖子很好的知道了我的實踐。 地址在：這裡 但是後面我覺得這樣用起來不是很舒適，因為底部數量是固定的。  能不能根據後臺的資料來動態的設定呢？  於是開始實踐，最終的

超連結按鈕點選變色，原來的連結恢復原色

視訊播放列表的超連結按鈕點選變色，原來的恢復原色，主要是讓使用者清楚的知道此刻播放的是哪一集。這裡所說的實現方法並不是利用css的link、hover、active所實現的，雖然css也能做到超連結點選變色，但是卻不能用到這裡的需求上，因為css實現的點選變色，是不能再點選頁面其他地方的，很顯然，看視訊的時候

android imageButton 點選按鈕前中後，按鈕顏色的變化

我們在開發的過程中，往往為了美化介面的需要，會修改按鈕的預設外觀，而因為Android中的按鈕有三種狀態—預設，被點選，被選中。所以，如果要改變按鈕的外觀，需要對這三種情況都做出修改，也許在以往，我們最容易想到的就是，手動監聽按鈕的選中和點選事件，然後寫程式碼來替換按鈕的背景，但是在android中，我們

【JavaScript】點選那個按鈕，那個按鈕變色，其他方案

author：咔咔 wechat：fangkangfk   方案： 1.先將第一次顯示的給給預設樣式，也就是新增checked的class 2.如果點選了之後傳遞一個引數給後臺，後臺assign到前端，使用引數判斷，根據引數就可以判斷誰需要加checked

Android中如何編寫圖片選擇器，實現按點選按鈕時按鈕的圖片或者顏色發生變化

1. 先看個圖，展示下我們要實現的效果：，點選按鈕的時候，按鈕變為這種顯示效果。 2. 其實這就是個圖片選擇器的編寫，當按鈕點選的時候，用另一張圖片去替換原有圖片，實現顏色的變化。 3. 具體步驟：     （1）首先在應用程式下→res目錄下建立一個folder，命名為d

動態建立一組按鈕，併為其繫結變數引數事件方法

做專案時，遇到一個比較奇怪的需求，需要用highChart作圖，但是由於橫座標是公司的部分職級的人員，且人員數目較多，這樣就會造成作出來的圖好長， 在有限的螢幕上顯示不全。於是客戶要求，可以將所有人員根

【前端】angularJS或者jquery實現按鈕點選變色，再點選變回來

目的：使按鈕在兩種狀態之間切換，注意：簡單的通過.修改focus和active的樣式是做不到的。 效果圖： html程式碼： <div class="col-1">

js勾選checkbox，按鈕可按

變色 訂單 blank http put box label ace submit 主要實現jquery方法，勾選checkbox後按鈕變色並且除去disabled $(function () { $(‘.pricing-box‘).click(fun

怎麽點擊一個按鈕顯示當前的時間，用js 實現

按鈕 點擊 asc utf script doctype tex 當前 一個 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

VS2013+QT寫的Action或按鈕明明沒有按下，卻會調用

相同 感悟 需要 如果 最好 vs2013 span copy 。。 我今天調了一天的bug，已知不懂為什麽其它都可以，但是一直這裏輸出不行，換了多種思路，一直調試； 。。。 終於，在一次次重新看代碼的時候註意到，有一處地方，我認為是不會錯的代碼的地方，實際上是有錯誤的：

spring mvc：常用標簽庫(文本框，密碼框，文本域，復選框，單選按鈕，下拉框隱藏於，上傳文件等)

標簽庫 state -h ring lib ati gap 下拉列表 hiberna 在jsp頁面需要引入：<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>標簽. 文