【js自定义鼠标样式】【js自定义鼠标动画】

文章目录


前言

自定义鼠标形状,自定义鼠标的动画,可以让我们的页面更加有设计感。

当前需求:吧鼠标自定义成一个正方形,鼠标的效果有:和页面的颜色做色差处理,例如当鼠标指到的颜色是白色,在鼠标的这块区域中显示的是黑色,另外,当鼠标指向特定区域时,正方形的鼠标放大三倍,并且以中心为圆点旋转。


一、效果图

鼠标放大之后的效果

鼠标没放大的效果

鼠标的色差

二、实现步骤

1. 去除原有鼠标样式

css 复制代码
body {
  cursor: none;
}

2. 自定义鼠标样式

代码如下(示例):

html 复制代码
<div id="mouse" class="mouse"></div>
css 复制代码
/* pointer-events: 取消它的鼠标事件,并指向它下面的元素。 */
/* mix-blend-mode: 设置图片元素与父容器背景(黄色)进行混合 */
.mouse {
  width: 30px;
  height: 30px;
  will-change: top, left; 
  position: fixed;
  left: -200px;
  z-index: 10020;
  pointer-events: none;
  mix-blend-mode: difference;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 这是鼠标中的文字,可以不写 */
.mouse-text::after {
  content: "VIEW";
}

js如下

javascript 复制代码
// 引用gsap做动画
import gsap from 'gsap';

// 自定义鼠标样式
function setMouse() {
  const mouse = document.querySelector('.mouse');
  window.addEventListener('mousemove', function(event){    
    mouse.style.left = event.clientX - mouse.offsetWidth/2 + 'px';
    mouse.style.top = event.clientY - mouse.offsetHeight/2 + 'px';       
  })
  gsap.to("#mouse", {
    rotation: -30,
  });
}

// 鼠标动画(放大,旋转)
var mouseTl;

function setMouseChange1() {
  mouseTl = gsap.timeline();
  mouseTl.to("#mouse", {
    duration: .2,
    width: "150px",
    height: "150px"
  });
  mouseTl.fromTo("#mouse", {
    rotation: -30,
  },
  {
    duration: 7,
    repeat: -1,
    rotation: 330,
    ease: "none",
  });
  const mouseDiv = document.getElementById("mouse");
  mouseDiv.setAttribute("class", "mouse mouse-text");
}

// (缩小,旋转到原位)
function setMouseChange2() {
  mouseTl.pause(0);
  const mouseDiv = document.getElementById("mouse");
  mouseDiv.setAttribute("class", "mouse");
}

3. 使用

代码如下(示例):

html 复制代码
<div @mouseenter="bannerTextEnter" @mouseleave="bannerTextLeave">ANIMATION!</div>
javascript 复制代码
// 鼠标移动到banner文字事件
function bannerTextEnter() {
  setMouseChange1();
}
function bannerTextLeave() {
  setMouseChange2()
}

总结

以上就是自定义鼠标样式,自定义鼠标动画的全部了,如有疑问,请评论区留言。

相关推荐
海天胜景5 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘25 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾29 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉38 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun2 小时前
Promise 基础使用
前端·javascript·promise
Codebee2 小时前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
邢同学爱折腾2 小时前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron