国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端每日實戰：148# 視頻演示如何用純 CSS 創作從按鈕兩側滑入裝飾元素的懸停特效

beanlam / 1915人閱讀

摘要：源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義，容器是一個無序列表，列表項代表按鈕居中顯示去掉列表項前面的符號設置按鈕的文字樣式用偽元素在按鈕的左側增加一個方塊用偽元素在按鈕的右側增加一條下劃線接下來設置鼠標懸停效果。

效果預覽

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

https://codepen.io/comehope/pen/yRyOZr

可交互視頻

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cmWMQtz

源代碼下載

每日前端實戰系列的全部源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器是一個無序列表，列表項代表按鈕：

</>復制代碼 
    •     
    • home

居中顯示：

</>復制代碼 
  1. body {
  2.   margin: 0;
  3.   height: 100vh;
  4.   display: flex;
  5.   align-items: center;
  6.   justify-content: center;
  7.   background: linear-gradient(deepskyblue, navy);
  8. }

去掉列表項前面的符號：

</>復制代碼 
  1. ul {
  2.   padding: 0;
  3.   list-style-type: none;
  4. }

設置按鈕的文字樣式：

</>復制代碼 
  1. ul li {
  2.   color: #ffffd;
  3.   font-size: 25px;
  4.   font-family: sans-serif;
  5.   text-transform: uppercase;
  6. }

用偽元素在按鈕的左側增加一個方塊：

</>復制代碼 
  1. ul li {
  2.   position: relative;
  3. }
  4. ul li::before {
  5.   content: "";
  6.   position: absolute;
  7.   width: 100%;
  8.   height: 100%;
  9.   background: tomato;
  10.   left: -100%;
  11. }

用偽元素在按鈕的右側增加一條下劃線：

</>復制代碼 
  1. ul li::after {
  2.   content: "";
  3.   position: absolute;
  4.   width: 100%;
  5.   height: 0.2em;
  6.   background: tomato;
  7.   bottom: 0;
  8.   left: 100%;
  9. }

接下來設置鼠標懸停效果。
當鼠標懸停時，左側的方塊移到文字所在位置：

</>復制代碼 
  1. ul li::before {
  2.   transition: 0.4s ease-out;
  3. }
  4. ul li:hover::before {
  5.   left: 100%;
  6. }

右側的下劃線移到文字所在位置，它的動畫時間延遲到方塊的動畫快結束時再開始：

</>復制代碼 
  1. ul li::after {
  2.   transition: 0.3s 0.3s ease-out;
  3. }
  4. ul li:hover::after {
  5.   left: 0%;
  6. }

同時，提高文字的亮度：

</>復制代碼 
  1. ul li {
  2.   transition: 0.3s;
  3.   cursor: pointer;
  4. }
  5. ul li:hover {
  6.   color: #fff;
  7. }

隱藏掉按鈕外的部分，使方塊和下劃線在默認狀態下都不可見，只有鼠標懸停時它們才從兩側入場：

</>復制代碼 
  1. ul li {
  2.   overflow: hidden;
  3. }

最后，在 dom 中再增加幾個按鈕：

</>復制代碼 
    •     
    • home
    •     
    • products
    •     
    • services
    •     
    • contact

布局多個按鈕：

</>復制代碼 
  1. ul {
  2.   display: flex;
  3.   flex-direction: column;
  4.   align-items: center;
  5. }
  6. ul li {
  7.   margin: 0.5em;
  8. }

大功告成！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117020.html

相關文章

  • 前端每日實戰：148# 視頻演示如何用純 CSS 創作從按鈕兩側滑入裝飾元素的懸停特效

    摘要：源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義，容器是一個無序列表，列表項代表按鈕居中顯示去掉列表項前面的符號設置按鈕的文字樣式用偽元素在按鈕的左側增加一個方塊用偽元素在按鈕的右側增加一條下劃線接下來設置鼠標懸停效果。 showImg(https://segmentfault.com/img/bVbhEuH?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可以在...

    wuaiqiu 評論0 收藏0

  • 前端每日實戰 2018 年 9 月份項目匯總（共 26 個項目）

    摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（共 29 個項目） 2018 年 6 月份項目匯總（...

    lavnFan 評論0 收藏0

  • 前端每日實戰 2018 年 9 月份項目匯總（共 26 個項目）

    摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書 過往項目 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（共 29 個項目） 2018 年 6 月份項目匯總（...

    whatsns 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<