腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

使用CSS寫一個帶追蹤特效的漸變按鈕

發(fā)布時間：2023-10-30 12:01:31 作者：_island

我要評論

這篇文章給大家介紹了如何使用使用CSS寫一個帶追蹤特效的漸變按鈕，文中有詳細的代碼示例供大家參考，具有一定的參考價值，感興趣的小伙伴跟著小編一起來看看吧

寫一個帶追蹤特效的漸變按鈕

開頭先觀看這張GIF圖：

是否被它的出色動畫效果所吸引？

這是從一個完美競技平臺中錄制出來的

我腦海中萌生了用CSS來模仿這一效果的念頭

繪畫元素

我們先記錄下這個按鈕浮動的顏色（#868BFF），還有按鈕的背景的漸變色（#39D5FF->#868bff）

外部使用一個div元素表示一個自定義按鈕元素，內(nèi)部包含一個div元素（follow），用于實現(xiàn)一個尾隨鼠標(biāo)的效果。

當(dāng)鼠標(biāo)移動到按鈕上時，follow元素將跟隨鼠標(biāo)的位置，創(chuàng)造出一個視覺上的尾隨效果，以增強用戶界面的交互性

<div class="custom-button">
  <div class="follow"></div>
  按鈕
</div>

接下來，結(jié)合我們之前記錄下來的色值，給按鈕添加上漸變色和浮動的元素

.custom-button {
  height: 80px;
  width: 400px;
  background: linear-gradient(to right, #39D5FF, #868bff);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.follow {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #868bff 0%, transparent 70%, transparent 100%);
  transform-origin: center;
  position: absolute;
  left: 0;
  top: 0;
}

設(shè)置完畢后，你將會得到以下這個效果圖

綁定事件

在我們錄制的GIF圖中，我們可以看到當(dāng)我們鼠標(biāo)移動到按鈕上面的時候，會出現(xiàn)一個動畫效果的軟化邊緣圓形，以增強元素的視覺吸引力

你是不是也和我一樣第一時間想到了利用mousemove事件來監(jiān)聽鼠標(biāo)移動

我們給外部的div綁定上mousemove事件

<div class="custom-button" @mousemove="move">
  <span class="follow"></span>
  按鈕
</div>

const move=()=>{}

通過mouseEvent事件，我們可以拿到很多關(guān)于鼠標(biāo)的各種信息，例如鼠標(biāo)的位置，按鈕狀態(tài)，事件類型...

如果您對mouseEvent事件不是很熟悉，可以看看這里 MouseEvent

接下來，我們通過mouseEvent事件拿到offsetX和offsetY屬性

這兩個屬性表示的是鼠標(biāo)相對于目標(biāo)元素內(nèi)部左上角的偏移量

const move = (e: MouseEvent) => {
  const { offsetX, offsetY } = e
  loc.X = offsetX - 90;
  loc.Y = offsetY - 90;
}

現(xiàn)在當(dāng)我們鼠標(biāo)進入到按鈕內(nèi)移動時，控制臺就會持續(xù)打印出當(dāng)前鼠標(biāo)基于元素的坐標(biāo)位置

我們新建一個reactive屬性，用來存放當(dāng)前鼠標(biāo)坐標(biāo)系，方便后續(xù)將值綁定到元素中

這里要注意的是，我們的鼠標(biāo)指針是在圓形元素的中間，所以我們要將offsetX，offsetY各自減去90px，也就是width/2和height/2

// 存放坐標(biāo)信息
const loc = reactive({
  X: 0,
  Y: 0
})
// 鼠標(biāo)事件
const move = (e: MouseEvent) => {
  const { offsetX, offsetY } = e
  loc.X = offsetX - 90;
  loc.Y = offsetY - 90;
}

將loc對象綁定給follow元素作為樣式

<span class="follow" ref="followRef" :style="{ transform: `translate(${loc.X}px, ${loc.Y}px)` }"></span>

小小知識點：使用transform進行移動可以優(yōu)化性能，因為它不會觸發(fā)頁面的reflow，reflow是比較消耗性能的操作

我們試一下效果，跟著鼠標(biāo)移動的效果貌似是實現(xiàn)了，但是你有沒有發(fā)現(xiàn)每次移動的時候follow元素總會閃到坐上角去，而且offsetX，offsetY輸出了{offsetX: 171, offsetY: 63}

我們給follow元素添加上pointer-events: none;即可解決問題

在多個元素重疊在一起時，event.target會發(fā)生變動，可以打印一下看看

事件目標(biāo)元素一直在span和div標(biāo)簽中來回切換，導(dǎo)致我們出現(xiàn)抖動的效果

來看看調(diào)整過的效果！

實現(xiàn)動畫效果

這里可以使用CSS中的過渡動畫來實現(xiàn)我們的需求，這里使用scale函數(shù)用來改變follow元素的縮放效果，當(dāng)鼠標(biāo)進入到元素中，scale值會從0到1，反之，重置為0

我們給外部的div綁定多兩個事件，分別是mouseenter，mouseleave，用來記錄當(dāng)前鼠標(biāo)是否進入到元素中

定義兩個ref屬性，用來記錄transitionDuration值（元素CSS屬性的過渡時間）和isShowCircle是否顯示follow元素

<!-- 綁定鼠標(biāo)事件和CSS屬性值 -->
<div class="custom-button" @mousemove="move" @mouseenter="enter" @mouseleave="leave">
  <span class="follow" ref="followRef"
    :style="{ transform: `translate(${loc.X}px, ${loc.Y}px) scale(${isShowCircle ? 1 : 0})`, transitionDuration: tds }"></span>
  按鈕
</div>

// 是否顯示圓形
const isShowCircle = ref(false)
// 過渡時間
const tds = ref('0.2s')
// 當(dāng)鼠標(biāo)進入到元素后觸發(fā)
const enter = () => {
  isShowCircle.value = true
  // 這里要注意下
  // 需要延遲設(shè)置tds值，否則會出現(xiàn)進入時動畫丟失效果
  setTimeout(() => {
    tds.value = '0s';
  }, 200);
}
// 當(dāng)鼠標(biāo)離開元素后觸發(fā)
const leave = () => {
  isShowCircle.value = false
  tds.value = '0.2s';
}

現(xiàn)在就可以來看看我們效果怎么樣

解決文字層級問題

現(xiàn)在我們的特效會將按鈕中的文字覆蓋掉，是因為當(dāng)兄弟元素脫離了文檔流之后，元素的層級可能會比兄弟元素略高一些，我們只需要在按鈕里的文字用span標(biāo)簽包裹著，并給他指定一個適當(dāng)?shù)?code>z-index即可解決這個問題

別忘記了，也要設(shè)置pointer-events: none;哦，否則會出現(xiàn)抖動問題

.text {
    z-index: 1;
    pointer-events: none;
}

擴展

在Vue項目開發(fā)中，我們可能會遇到一份代碼重復(fù)使用的情況，這個時候我們可以使用Vue組件的方式來封裝這個按鈕

這里我就直接把代碼貼在這里啦，有需要的同學(xué)可以從這里Copy~~

<template>
    <div class="custom-button" @mousemove="move" @mouseenter="enter" @mouseleave="leave">
        <span class="follow" ref="followRef"
            :style="{ transform: `translate(${loc.X}px, ${loc.Y}px) scale(${isShowCircle ? 1 : 0})`, transitionDuration: tds }"></span>
        <span class="text">
            <slot></slot>
        </span>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
const isShowCircle = ref(false)
const followRef = ref()
const loc = reactive({
    X: 0,
    Y: 0
})
const tds = ref('0.2s')
const enter = () => {
    isShowCircle.value = true
    setTimeout(() => {
        tds.value = '0s';
    }, 200);
}
const leave = () => {
    isShowCircle.value = false
    tds.value = '0.2s';
}
const move = (e: MouseEvent) => {
    const { offsetX, offsetY } = e
    loc.X = offsetX - 90;
    loc.Y = offsetY - 90;
}
</script>
<style scoped>
.custom-button {
    height: 80px;
    width: 400px;
    background: linear-gradient(to right, #39D5FF, #868bff);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.follow {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, #868bff 0%, transparent 70%, transparent 100%);
    transform-origin: center;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
}
.text {
    z-index: 1;
    pointer-events: none;
}
</style>

以上就是使用CSS寫一個帶追蹤特效的漸變按鈕的詳細內(nèi)容，更多關(guān)于CSS追蹤特效的漸變按鈕的資料請關(guān)注腳本之家其它相關(guān)文章！