2021-01-20 11-20-31.gif
类似效果地址:Vue<自定义鼠标指针效果>
知识点：
- 背景融合，实现鼠标移动到按键上合成不同的颜色效果
mix-blend-mode: difference;
2.isolation CSS属性定义该元素是否必须创建一个新的层叠上下文,一般是配合mix-blend-mode使用
/*如果不单独使用，背景颜色将被考虑进去*/
isolation: isolate;
- 禁止选择器方法，实现跟随鼠标的标签不会默认被点击
pointer-events: none;
4.css兄弟选择器
[cursor='link']:active ~ .cursor
5.3D旋转 rotate3d
/*
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转
rotateX(a)函数功能等同于rotate3d(1,0,0,a)
rotateY(a)函数功能等同于rotate3d(0,1,0,a)
rotateZ(a)函数功能等同于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()
},
//鼠标执行方法
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等属性 */
// https://www.jianshu.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;
}
/* 鼠标样式 */
.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;
}
/* 鼠标放在按钮上 仿鼠标标签的样式变化 */
[cursor='link']:hover ~ .cursor {
mix-blend-mode: difference;
transform: scale(1.5);
background: #fff;
border-color: #fff;
}
/* 鼠标点击按钮 仿鼠标标签的样式变化 */
[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>
