欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > html5库 > HTML5动画 > js和CSS3自定义鼠标特效

js和CSS3自定义鼠标特效

js和CSS3自定义鼠标特效

关键词:鼠标特效,自定义鼠标,自定义鼠标样式,自定义鼠标动画,鼠标跟随,js鼠标动画,css鼠标样式,html5库,h5donghua

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

简要教程

这是一款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));

})();           
                

该js和CSS3自定义鼠标特效的codepen网址为:https://codepen.io/hiMRK/pen/ErMoKO

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/h5_h5donghua/9645.html

 在线演示  免费下载
编号:201903180000009645
大小:0.01MB
上传时间:2019-03-29 08:01
素材由用户"sxqwd2008"上传分享。

标签

最新推荐素材

与js和CSS3自定义鼠标特效相关的素材

.