svg+js实现鼠标跟随扑克牌拖影动画效果代码-html代码-BFW代码库

svg+js实现鼠标跟随扑克牌拖影动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现鼠标跟随扑克牌拖影动画效果代码

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

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

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


  
<style>
body {
	margin: 0 auto;
	height: 100vh;
	background: radial-gradient(circle, #082475 67%, #e4a700 67.5%, #a46829, #c80000, #7c1415, #000000);
}
#cursorCurl {
	position: fixed;
	height: 100%;
	width: 100%;
	user-select: none;
	pointer-events: none;
}
#cursorCurl > path {
/* 	acts as a smoothing effect */
	transition: 100ms;
}
a {
	cursor: pointer;
	float: right;
	padding: 20px;
}
marker {
	transition: 200ms;
}
</style>

  
</head>

<body translate="no">
  <svg id="cursorCurl" stroke-linecap="round" stroke-linejoin="round">
	<defs>
		<marker id="cards" viewBox="0 0 50 70" refX="25" refY="35" markerWidth="25" markerHeight="35" orient="auto-start-reverse">
		<pattern id="dots" viewBox="0 0 20 20" width="28%" height="20%">
			<rect height="100%" width="100%" fill="#f5f5f5" />
			<g fill="#13563b">
				<circle cx="0" cy="0" r="1" />
				<circle cx="20" cy="0" r="1" />
				<circle cx="0" cy="20" r="1" />
				<circle cx="20" cy="20" r="1" />
			</g>
			<path d="M 3 3 l5 5 M 17 3 l -5 5 M 17 17 l -5 -5 M 3 17 l 5 -5" stroke="#13563b" stroke-width="0.3" />
			<path d="M 8 9 h4 l1 1 l -3 2.5 l -3 -2.5z M7.5 10h5 M 8 9l1 1l1 -1l1 1l1 -1l1 1M10 12.5l-1 -2.5M10 12.5l1 -2.5" fill="none" stroke="#13563b" stroke-width="0.2" />
		</pattern>
		<rect height="69.5" width="49.5" x=".25" y=".25" fill="url(#dots)" rx="4" stroke="#ccc" stroke-width="0.5" />
	</marker>
	</defs>
</svg>
  
      <script  >
// for intro motion
let mouseMoved = false;
const pointer = {
  x: 0.5 * window.innerWidth,
  y: 0.5 * window.innerHeight };

const params = {
  pointsNumber: 26,
  widthFactor: 0.3,
  spring: 0.7,
  friction: 0.4 };

const trail = new Array(params.pointsNumber);
for (let i = 0; i < params.pointsNumber; i++) {
  trail[i] = {
    x: pointer.x,
    y: pointer.y,
    dx: 0,
    dy: 0 };

}
window.addEventListener("click", e => {
  updateMousePosition(e.pageX, e.pageY);
});
window.addEventListener(&.........完整代码请登录后点击上方下载按钮下载查看