利用CSS變數實現令人震驚的懸浮效果

最近，我從 Grover網站上發現以一個好玩兒的懸停動畫，也有了些自己的靈感。這個動畫是將滑鼠移動到訂閱按鈕上移動游標會顯示相應的彩色漸變。這個想法很簡單，但是它能使這個按鈕脫穎而出，人們一下子就注意到它了，增加了點選的概率。

怎樣才能達到這個效果，使我們的網站脫穎而出呢？其實，它並不像你想象的那麼難！

追蹤位置

我們要做的第一件事就是獲取到滑鼠的位置。

document.querySelector(`.button`).onmousemove = (e) => {

 

  const x = e.pageX – e.target.offsetLeft

  const y = e.pageY – e.target.offsetTop

 

  e.target.style.setProperty(`–x`, `${ x }px`)

  e.target.style.setProperty(`–y`, `${ y }px`)

 

}

1. 選擇元素，等待，直到使用者將滑鼠移過它；

2. 計算相對於元素的位置；

3. 將座標存在CSS的變數中。

是的，僅僅9行程式碼就讓你能獲知使用者放置滑鼠的位置，通過這個資訊你能達到意想不到的效果，但是我們還是先來完成CSS部分的程式碼。

動畫漸變

我們先將座標儲存在CSS變數中，以便能夠隨時使用它們。

.button {

  position: relative;

  appearance: none;

  background: #f72359;

  padding: 1em 2em;

  border: none;

  color: white;

  font–size: 1.2em;

  cursor: pointer;

  outline: none;

  overflow: hidden;

  border–radius: 100px;

 

  span {

    position: relative;

  }

 

  &::before {

    —size: 0;  

 

    content: “;

    position: absolute;

    left: var(—x);

    top: var(—y);

    width: var(—size);

    height: var(—size);

    background: radial–gradient(circle closest–side, #4405f7, transparent);

    transform: translate(–50%, –50%);

    transition: width .2s ease, height .2s ease;

  }

 

  &:hover::before {

    —size: 400px;

  }

}

1. 用span包裹文字，以避免顯示在按鈕的上方。

2. 將 width和height初始化為0px，當使用者懸停在按鈕上時，將其改為400px。不要忘了設定這種轉換以使其像風一樣

本文作者：程式設計師觀察

本文釋出時間：2018年05月11日

本文來自雲棲社群合作伙伴CSDN，瞭解相關資訊可以關注csdn.net網站。