幽靈按鈕的實現

時間 2019-11-20

標籤幽靈按鈕實現简体版

原文原文鏈接

幽靈按鈕是2014年開始出現的，在當時但是一種」新趨勢「。目前大量應用於國外網站，國內相對少一些，但效果是使人十分舒服。css

如今或許有點過期了，可是對於我這種新手，用它來練練手仍是不錯的。html

那麼先溫故一下，什麼是幽靈按鈕web

幽靈按鈕，也就是Ghost Buttons，是一個透明的按鈕，一般是矩形或者圓角矩形，僅保留基本的形制，使用細線來標識邊界；按鈕內的文字一般使用纖細的非襯線體字體的純文本，來指明按鈕功能。chrome

幽靈按鈕有時候也被稱爲「空按鈕」，一般會被設計得比普通的按鈕更大一些。而它們之因此被命名爲「幽靈」，是應爲這種按鈕如同鬼魂同樣透明，可是獨特的造型會馬上吸引用戶的注意力——正如同故事中鬼魂同樣抓人眼球。瀏覽器

雖然你可能在大量的網站中看到幽靈按鈕，可是並不是全部的網站都和幽靈按鈕相得益彰。真正適合幽靈按鈕的是那些使用極簡風和扁平風的網站和APP，使用大圖背景的網站也與之很是搭。佈局

幽靈按鈕的使用實例

Bilderphoto.compost

第一個例子就是 Bilderphoto.com，典型的大圖背景設計。字體

幽靈按鈕置於網站正中央，吸引用戶去點擊，以發現更多的內容。可是在我看來，幽靈按鈕並無獲得很好的安置。爲了對比度，幽靈按鈕的邊框和文字均使用了白色，但是背景中的女孩也是一身白，這使得按鈕中的單詞「imagemaking」並不徹底符合對比度的需求，影響了可讀性。固然，積極的一面在於，你能夠經過刷新看到其餘的圖片。網站

UnionRoomui

接下來的這張圖片來自於UnionRoom的網站，這是一家網頁設計和開發公司。

比起簡單設置一個圖片背景，他們選擇了更有逼格的方式——使用半色調的視頻來做爲背景。他們的服務展現是經過網頁中的這套扁平風的動效和界面來實現的。若是你想對他們的服務瞭解更多的話，點擊底部的幽靈按鈕就能夠了。

不一樣於上一個例子，UnionRoom的網站背景色調更暗，使得內容顯得更加突出。這個幽靈按鈕符合它該有的全部特點，不突兀也很少餘，合理和均衡。

Worldbackupday

最後這個案例是worldbackupday.com，使用了典型的扁平化設計。

我用的是www.iuvo.si/的幽靈按鈕類型來作的，具體的能夠上它的網站看交互效果：

首先我去千庫網隨便找了3個png的圖片充當那3個圖片。而後摳下了那個小箭頭。

首先進行了基本的佈局，用一個大的container包圍着3個小box，而後每一個小box裏面放一個圖片和一個按鈕。基本html結果以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <link rel="stylesheet" href="style.css">
 5 <head>
 6     <title>幽靈按鈕小組件</title>
 7 </head>
 8 <body>
 9 <div id="container">
10     <div class="box box-mission">
11         <span class="icon"></span>
12         <a href="#">
13 
14  mission 15         </a>
16     </div>
17     <div class="box box-play">
18         <span class="icon"></span>
19         <a href="#">
20 
21  play 22         </a>
23     </div>
24     <div class="box box-touch">
25         <span class="icon"></span>
26         <a href="#">
27 
28  touch 29         </a>
30     </div>
31 </div>
32 </body>
33 </html>

此時咱們若是對佈局不熟悉的話，咱們能夠給相應的塊添加背景顏色，將基本佈局作好以後再把background改成圖片。

佈局完以後重點就來了！！！

怎麼作微交互呢？

首先咱們須要作的是，當鼠標移入box塊裏面的上面那個塊，也就是咱們的圖片區域時，咱們讓這個區域進行放大和旋轉。

此時就要用到transform裏面的scale（放大）和rotate（旋轉）的屬性了。注意rotate的單位是deg，也就是度。還須要注意的是，在各類瀏覽器下的兼容性，chrome下要加前綴-webkt-，firefox要加前綴-moz-，opera下要加前綴-o-。還須要用到transition，用來平滑的過渡效果，也是，須要作兼容性處理。

而後就是按鈕的線條移動效果，這個相對複雜一些。

首先咱們要在a標籤內，添加4個span標籤，用來作線，

1             <span class="top"></span>
2             <span class="bottom"></span>
3             <span class="left"></span>
4             <span class="right"></span>

先把a標籤添加相對佈局，4個span標籤設置寬高，背景色，而後絕對定位到a標籤的4個邊框線上。注意：0px是沒辦法定位到邊框線上的，0px只能定位到內容的最上方，也就是邊框的下方，要定位到邊框線上，大小應該是負的邊框線的寬度。而後朝4個方向進行必定的位移差(設置絕對定位的left、top、bottom、right)。最後設置爲以下狀態：

而後將左右的span的寬度設置爲0，上下的span的高度設置爲0；

而後當鼠標移入a標籤時，4條線相應的移回到4個邊框線上，而且寬度或者高度變回原來邊框線的寬度或者高度。

這裏也須要用到transition屬性。能夠平滑的過渡這個效果。切記兼容性。

如下是相應的css代碼：

 1 *{
 2  margin:0px;
 3  padding:0px;
 4 }
 5 body{
 6  background: linear-gradient(to bottom,#4A7F68,#02020c);
 7 
 8 }
 9 @media screen and (min-width:1000px){
 10  #container{  11  width:1000px;
 12  height:400px;
 13  margin:60px auto;
 14 
 15     }
 16 }  17 @media screen and (min-width:768px) and (max-width:1000px){
 18  #container{  19  width:768px;
 20  height:400px;
 21  margin:60px auto;
 22 
 23     }
 24 }  25 @media screen and (max-width:768px){
 26  #container{  27  width:300px;
 28  height:400px;
 29  margin:60px auto;
 30 
 31     }
 32 }  33 #container .box{
 34  width:300px;
 35  height: 300px;
 36  display: inline-block;
 37  margin-left:22px;
 38  margin-top:22px;
 39 }
 40 #container .box .icon{
 41  width:200px;
 42  height:160px;
 43  display: block;
 44  margin:20px auto;
 45  transition: transform 0.2s ease;
 46  -webkit-transition: transform 0.2s ease;
 47  -o-transition: transform 0.2s ease;
 48  -moz-transition: transform 0.2s ease;
 49 }
 50 #container .box-mission .icon{
 51  background:url("img/mission.png") 0px -24px no-repeat;
 52  background-size:200px auto;
 53 }
 54 #container .box-play .icon{
 55  background:url("img/play.png") 0px -24px no-repeat;
 56  background-size:200px auto;
 57 }
 58 #container .box-touch .icon{
 59  background:url("img/touch.png") 0px -24px no-repeat;
 60  background-size:200px auto;
 61 }
 62 #container .box .icon:hover{
 63  transform:scale(1.2) rotate(360deg);
 64  -webkit-transform:scale(1.2) rotate(360deg);
 65  -o-transform:scale(1.2) rotate(360deg);
 66  -moz-transform:scale(1.2) rotate(360deg);
 67 }
 68 #container .box a{
 69  width:220px;
 70  height:55px;
 71  line-height: 55px;
 72  border:2px solid rgba(255,255,255,0.6);
 73  display:block;
 74  margin: 40px auto;
 75  text-decoration: none;
 76  color:#2ecc71;
 77  font-family: "微軟雅黑";
 78  font-size: 20px;
 79  padding-left:40px;
 80  background:url("img/jiantou.png") no-repeat 190px center;
 81  transition: 0.2s ease;
 82  position:relative;
 83 }
 84 #container .box a .top{
 85  width:0px;
 86  height:2px;
 87  position:absolute;
 88  top:-2px;
 89  left:-60%;
 90  background-color: white;
 91  transition: 0.2s ease;
 92  -webkit-transition: 0.2s ease;
 93  -o-transition: 0.2s ease;
 94  -moz-transition: 0.2s ease;
 95 }
 96 #container .box a .bottom{
 97  width:0px;
 98  height:2px;
 99  position:absolute;
100  bottom:-2px;
101  right:-60%;
102  background-color: white;
103  transition: 0.2s ease;
104  -webkit-transition: 0.2s ease;
105  -o-transition: 0.2s ease;
106  -moz-transition: 0.2s ease;
107 }
108 #container .box a .left{
109  width:2px;
110  height:0px;
111  position:absolute;
112  left:-2px;
113  bottom:-160%;
114  background-color: white;
115  transition: 0.2s ease;
116  -webkit-transition: 0.2s ease;
117  -o-transition: 0.2s ease;
118  -moz-transition: 0.2s ease;
119 }
120 #container .box a .right{
121  width:2px;
122  height:0px;
123  position:absolute;
124  right:-2px;
125  top:-160%;
126  background-color: white;
127  transition: 0.2s ease;
128  -webkit-transition: 0.2s ease;
129  -o-transition: 0.2s ease;
130  -moz-transition: 0.2s ease;
131 }
132 #container .box a:hover{
133  background:url("img/jiantou.png") no-repeat 200px center;
134 }
135 #container .box a:hover .top{
136  left:-2px;
137  width:262px;
138 }
139 #container .box a:hover .bottom{
140  right:-2px;
141  width:262px;
142 }
143 #container .box a:hover .left{
144  bottom:-2px;
145  height:57px;
146 }
147 #container .box a:hover .right{
148  top:-2px;
149  height:57px;
150 }

效果圖：

交互效果就不展現了。感興趣的能夠去原網站觀看。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。