svg+js实现鼠标跟随光标轨迹效果代码

代码语言:html

所属分类:其他

代码描述:svg+js实现鼠标跟随光标轨迹效果代码

代码标签: svg js 鼠标 跟随 光标 轨迹

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
  
<style>
body{
  margin:0;
  padding:0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  
  font-family: 'Montserrat', 'Roboto';
  text-transform: uppercase;
}
#svgCanvas{
  position: absolute;
  width: 100vw;
  height: 100vh;
}
</style>


  
  
</head>

<body translate="no">
  <h1>Cursor Trail</h1>
<svg id="svgCanvas">
        <defs>
            <linearGradient id="circleGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:rgba(18,194,233,1);stop-opacity:1" />
                <stop offset="50%" style="stop-color:rgba(196,113,237,1);stop-opacity:1" />
                <stop offset="100%" style="stop-color:rgba(252, 186, 3,1);stop-opacity:1" />
            </linearGradient>
        </defs>
  
</svg>
  
      <script  >
document.addEventListener("DOMCon.........完整代码请登录后点击上方下载按钮下载查看

网友评论0