js和CSS3自定义鼠标特效

这是一款js和CSS3自定义鼠标特效。该特效中,使用一个DIV元素来自定义鼠标,通过CSS代码来构建鼠标的形状,并通过js代码来驱动鼠标的动画。

预览  下载

使用方法

 HTML结构

基本的HTML结构如下。

<!--鼠标形状元素-->

<div id="cursorBlob"></div>

<!--页面内容-->

<div class="wrap">



</div>
 CSS样式

为鼠标元素添加一些基础的CSS样式。

#cursorBlob {

  width: 50px;

  height: 50px;

  background: linear-gradient(120deg, #FF1744, #E040FB, #2979FF, #00E5FF, #76FF03);

  background-size: 1600% 1600%;

  position: absolute;

  mix-blend-mode: difference;

  pointer-events: none;

  z-index: 1;

  transition: 0.15s linear;

  animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;

}



@keyframes blobRadius {

  0%, 100% {

    border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;

  }

  20% {

    border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;

  }

  40% {

    border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;

  }

  60% {

    border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;

  }

  80% {

    border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;

  }

}

@keyframes blobBackground {

  0%, 100% {

    background-position: 0% 50%;

  }

  50% {

    background-position: 100% 50%;

  }

}
 Javascript

最后通过下面的JS代码来在鼠标移动时,将制定的鼠标形状元素跟随鼠标一起移动。

const blobCursor = (() => {

const CURSOR = document.querySelector('#cursorBlob');

const LINKS = document.querySelectorAll('.nav__link');

const setCursorPos = e => {

const { pageX: posX, pageY: posY } = e;

CURSOR.style.top = `${posY - CURSOR.offsetHeight / 2}px`;

CURSOR.style.left = `${posX - CURSOR.offsetWidth / 2}px`;

};

document.addEventListener('mousemove', setCursorPos);



const setCursorHover = () => CURSOR.style.transform = 'scale(2.5)';

const removeCursorHover = () => CURSOR.style.transform = '';

LINKS.forEach(link => link.addEventListener('mouseover', setCursorHover));

LINKS.forEach(link => link.addEventListener('mouseleave', removeCursorHover));



})();  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值