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

快捷導(dǎo)航

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

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

我要評(píng)論

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

寫一個(gè)帶追蹤特效的漸變按鈕

開頭先觀看這張GIF圖：

是否被它的出色動(dòng)畫效果所吸引？

這是從一個(gè)完美競(jìng)技平臺(tái)中錄制出來的

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

繪畫元素

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

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

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

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

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

.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è)置完畢后，你將會(huì)得到以下這個(gè)效果圖

綁定事件

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

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

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

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

const move=()=>{}

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

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

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

這兩個(gè)屬性表示的是鼠標(biāo)相對(duì)于目標(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)進(jìn)入到按鈕內(nèi)移動(dòng)時(shí)，控制臺(tái)就會(huì)持續(xù)打印出當(dāng)前鼠標(biāo)基于元素的坐標(biāo)位置

我們新建一個(gè)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對(duì)象綁定給follow元素作為樣式

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

小小知識(shí)點(diǎn)：使用transform進(jìn)行移動(dòng)可以優(yōu)化性能，因?yàn)樗粫?huì)觸發(fā)頁(yè)面的reflow，reflow是比較消耗性能的操作

我們?cè)囈幌滦Ч?，跟著鼠?biāo)移動(dòng)的效果貌似是實(shí)現(xiàn)了，但是你有沒有發(fā)現(xiàn)每次移動(dòng)的時(shí)候follow元素總會(huì)閃到坐上角去，而且offsetX，offsetY輸出了{offsetX: 171, offsetY: 63}

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

在多個(gè)元素重疊在一起時(shí)，event.target會(huì)發(fā)生變動(dòng)，可以打印一下看看

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

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

實(shí)現(xiàn)動(dòng)畫效果

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

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

定義兩個(gè)ref屬性，用來記錄transitionDuration值（元素CSS屬性的過渡時(shí)間）和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)
// 過渡時(shí)間
const tds = ref('0.2s')
// 當(dāng)鼠標(biāo)進(jìn)入到元素后觸發(fā)
const enter = () => {
  isShowCircle.value = true
  // 這里要注意下
  // 需要延遲設(shè)置tds值，否則會(huì)出現(xiàn)進(jìn)入時(shí)動(dòng)畫丟失效果
  setTimeout(() => {
    tds.value = '0s';
  }, 200);
}
// 當(dāng)鼠標(biāo)離開元素后觸發(fā)
const leave = () => {
  isShowCircle.value = false
  tds.value = '0.2s';
}

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

解決文字層級(jí)問題

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

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

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

擴(kuò)展

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

這里我就直接把代碼貼在這里啦，有需要的同學(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寫一個(gè)帶追蹤特效的漸變按鈕的詳細(xì)內(nèi)容，更多關(guān)于CSS追蹤特效的漸變按鈕的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！