2021-01-20 11-20-31.gif
類似效果地址:Vue<自定義鼠標(biāo)指針效果>
知識點：
- 背景融合独柑，實現(xiàn)鼠標(biāo)移動到按鍵上合成不同的顏色效果
mix-blend-mode: difference;
2.isolation CSS屬性定義該元素是否必須創(chuàng)建一個新的層疊上下文,一般是配合mix-blend-mode使用
/*如果不單獨使用，背景顏色將被考慮進去*/
isolation: isolate;
- 禁止選擇器方法，實現(xiàn)跟隨鼠標(biāo)的標(biāo)簽不會默認被點擊
pointer-events: none;
4.css兄弟選擇器
[cursor='link']:active ~ .cursor
5.3D旋轉(zhuǎn) rotate3d
/*
x：是一個0到１之間的數(shù)值，主要用來描述元素圍繞X軸旋轉(zhuǎn)的矢量值他挎；
y：是一個０到１之間的數(shù)值皂股，主要用來描述元素圍繞Y軸旋轉(zhuǎn)的矢量值；
z：是一個０到１之間的數(shù)值凿跳，主要用來描述元素圍繞Z軸旋轉(zhuǎn)的矢量值；
a：是一個角度值疮方，主要用來指定元素在3D空間旋轉(zhuǎn)的角度控嗜，如果其值為正值，元素順時針旋轉(zhuǎn)骡显，反之元素逆時針旋轉(zhuǎn)
rotateX(a)函數(shù)功能等同于rotate3d(1,0,0,a)
rotateY(a)函數(shù)功能等同于rotate3d(0,1,0,a)
rotateZ(a)函數(shù)功能等同于rotate3d(0,0,1,a)
*/
transform:rotate3d(0, 0, 0, 0deg)
代碼如下：
<template>
<div class="overall">
<div class="container">
<div class="button one" cursor="link">button1</div>
<div class="button two" cursor="link">button2</div>
<div class="button three" cursor="link">button3</div>
<div class="cursor"></div>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.init()
},
methods: {
init() {
this.cursor()
this.mousemove()
this.mouseleave()
},
//鼠標(biāo)執(zhí)行方法
cursor() {
let cursor = document.querySelector('.cursor')
document.addEventListener('mousemove', function(e) {
cursor.style.left = e.clientX - 25 + 'px'
cursor.style.top = e.clientY - 25 + 'px'
})
},
mousemove() {
let buttons = document.querySelectorAll('.button')
buttons.forEach(el => {
el.addEventListener('mousemove', function(e) {
/* getBoundingClientRect用于獲取某個元素相對于視窗的位置集合疆栏。集合中有top, right, bottom, left等屬性 */
// http://www.reibang.com/p/824eb6f9dda4
const pos = el.getBoundingClientRect()
const mx = e.clientX - pos.left - pos.width / 2
const my = e.clientY - pos.top - pos.height / 2
el.style.transform =
'translate(' + mx * 0.15 + 'px, ' + my * 0.3 + 'px)'
el.style.transform +=
'rotate3d(' + mx * -0.1 + ', ' + my * -0.3 + ', 0, 12deg)'
})
})
},
mouseleave() {
let buttons = document.querySelectorAll('.button')
buttons.forEach(el => {
el.addEventListener('mouseleave', function(e) {
el.style.transform = 'translate3d(0px, 0px, 0px)'
el.style.transform = 'rotate3d(0, 0, 0, 0deg)'
})
})
}
}
}
</script>
<style >
</style>
<style lang="scss" scoped>
$cursorSize: 50px;
.overall {
background: #dbfbff;
}
/* 鼠標(biāo)樣式 */
.cursor {
pointer-events: none; //禁止選擇器方法
border-radius: 50%;
z-index: 999;
background: none;
position: fixed;
left: -$cursorSize;
top: -$cursorSize;
width: $cursorSize;
height: $cursorSize;
border-radius: 50%;
border: 2px solid #ccc;
transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
/* 鼠標(biāo)放在按鈕上 仿鼠標(biāo)標(biāo)簽的樣式變化 */
[cursor='link']:hover ~ .cursor {
mix-blend-mode: difference;
transform: scale(1.5);
background: #fff;
border-color: #fff;
}
/* 鼠標(biāo)點擊按鈕 仿鼠標(biāo)標(biāo)簽的樣式變化 */
[cursor='link']:active ~ .cursor {
transform: scale(0.8);
}
.container {
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/isolation */
isolation: isolate; /*如果不單獨使用，背景顏色將被考慮進去*/
display: flex;
position: absolute;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.button {
border-radius: 2px;
box-shadow: 0 10px 30px rgba(65, 72, 86, 0.1);
cursor: none;
display: inline-block;
padding: 10px 20px;
color: white;
font-size: 20px;
font-weight: 200;
margin: 0 20px;
outline: none;
user-select: none;
transition: transform 0.1s linear, color 0.1s linear, background 0.15s linear;
}
.button.one {
background: #4f29f0;
}
.button.two {
border: 1px solid #5a5a5a;
color: #5a5a5a;
background: none;
}
.button.three {
background: #12d0e9;
}
</style>
