前端實例練習 - 動效按鈕

動效按鈕

代碼儲存在Github
效果預覽

初衷：不少人在初學前端的時候都會問，「如何入門前端？」
同爲在前端學習道路上，奮力追趕的一員，本人對於目前網絡上所能看到的 「入門級」 的教材並不太滿意。學習一門新知識，實例是尤爲重要的。在這裏本人整理了目前頁面上常見功能實現的具體實例。願能爲你們提供一些幫助。
但願可以與你們互相分享，共同進步。

效果預覽

HTML 部分

建立按鈕

<div>
        <h2>立體特效</h2>
        <button class="button pressed">Click</button>    
    </div>
    <div>
        <h2>懸停特效</h2>
        <button class="button arrow">Hover</button>    
    </div>
    <div>
        <h2>漣漪特效</h2>
        <button class="button ripple">Click</button>    
    </div>

CSS 部分

設置.button樣式

/*設置按鈕樣式*/
.button {
  padding: 15px 25px;  
  font-size: 24px; 
  text-align: center; /*內容居中*/
  cursor: pointer;    /*設置光標樣式*/
  outline: none;      /*消除outline*/
  color: #fff;     
  border: none;       /*消除border*/
}

爲每一個按鈕單獨設置樣式

/*立體特效*/
.pressed {
  font-size: 24px; 
  padding: 15px 25px;  
  background-color: #4CAF50;
  border-radius: 15px;      /*設置邊框圓角*/
  box-shadow: 0 5px #999;   /*設置陰影*/
}

.pressed:hover {
  background-color: #3e8e41; /*懸停變背景色*/
}

.pressed:active {
  background-color: #3e8e41;
  box-shadow: 0 2px #666;    /*點擊後陰影變化*/
  transform: translateY(3px);/*點擊後按鈕沿着Y軸位移，位移量等於陰影變化量*/
}

/*懸停出現箭頭特效*/
.arrow {
  font-size: 28px;
  padding: 20px;
  width: 200px;
  border-radius: 4px;
  background-color: #f4511e;
  margin: 5px;
}

.arrow span {  
  position: relative; /*span相對定位，使span:after能夠據其進行絕對定位*/
  transition: 0.5s;
}

.arrow span:after {
  content: '\00bb';  /*僞元素content編碼*/
  position: absolute;/*根據span進行絕對定位*/
  opacity: 0;        /*透明度爲0，正常狀態下隱身*/
  top: 0;            /*拉高與span內文字同行*/
  right: -20px;      /*right爲0時，箭頭在span內文字最右邊，與文字重合。用負值讓箭頭更靠右*/
  transition: 0.5s;  
} 

.arrow:hover span {
  padding-right: 25px; /*懸停時增長右邊padding，給箭頭留出空間*/
}

.arrow:hover span:after {
  opacity: 1;     /*hover時，箭頭顯現*/
  right: 0;       /*在span最右邊，由於如今span右邊有padding，因此不會與文字重合*/
}

/*漣漪特效*/
.ripple {
  position: relative; /*設置爲相對定位*/
  background-color: #4CAF50;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  border-radius: 4px;
  overflow: hidden;  /*讓:after超出按鈕邊框部分隱藏*/
  text-decoration: none;
}

.ripple:after {
  content: "";
  background: #90EE90;
  display: block;      /*設置爲塊級元素，以能夠設置尺寸*/
  position: absolute;  /*相對按鈕絕對定位*/
  left: 0;             /*若是是right爲0，則靠右邊出現漣漪*/      
  top: 0;              
  padding-top: 100%;  
  padding-right: 100%;
  opacity: 0;          /*默認狀態下隱藏*/
  transition: all 0.8s
}

.ripple:active:after {
  padding-right: 0;   /*padding-right爲0，使:after寬度爲0*/
  opacity: 1;         /*點擊時出現*/
  transition: 0s      /*點擊時瞬間出現*/
}
/*點擊時，:after瞬間出現，可是尺寸爲0。
  點擊完，在0.8s內，:after寬度增長，可是透明度逐漸爲0。
  用此方法，實現漣漪效果。
*/

延展閱讀: CSS僞元素；僞元素content編碼

---

好啦，如今咱們已經寫完。

怎麼樣，是否是很簡單。趕快打開瀏覽器看看吧！

在這裏，只是給你們提供一種思路，參考。
具體的實現，每一個人均可以有不一樣的方法。
請你們趕快發揮想象，把你最想實現的功能，在電腦敲出來吧！

參考自w3cschools