純 css 區分 hover in / out 不同動畫

codepan 上面看到一個很有趣的 hover 效果,於是想說不要看他的程式碼,自己來實作看看。

一般我們要區分滑鼠進入或是離開,會需要用到 javascript 來監聽 moseover / mouseleave ,但是如果你是簡單的效果的話,不妨可以用 css 實作看看。

重點在於使用不同的 transition 條件,去阻擋某些應該要變化的屬性,hover沒有 hover的 css 使用不同的 transition 條件,就會看起來很像不同的動畫。

可以先去看看效果:codepan

或是看看影片:

純 css 區分 hover in / out 不同動畫

剪成影片好像也滿療癒的XDDD


 

 

HTML

<h1>Hover me</h1>

 

css

html,
body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 60px;
  display: block;
  position: relative;
  &::before {
    content: "";
    display: block;
    background-color: #ccc;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0;
    z-index: -1;
    transition: width 0.2s;
  }
  &:hover {
    &::before {
      width: 100%;
      left: 0;
      transition: width position 0.2s;
    }
  }
}

朝著「制定不同的 transition 條件」這個方向去想,就可以變化出滑鼠進入與離開的差異囉!

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。