js实现可切换正负极的磁铁相吸相斥动画效果代码-html代码-BFW代码库

js实现可切换正负极的磁铁相吸相斥动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现可切换正负极的磁铁相吸相斥动画效果代码，点击鼠标左键可切换正负极。

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


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

<head>

  <meta charset="UTF-8">
  

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&amp;display=swap'>
  
<style>
:root {
	--polarity: "+";
	--color: red;
}
body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background-color: #add495;
	font-family: system-ui;
	overflow: hidden;
	user-select: none;
}

.magnet {
	width: 100px;
	aspect-ratio: 1/1;
	background: linear-gradient(to bottom, dimgray 20%, transparent 20%),
		var(--color);
	border-radius: 0 0 50px 50px;
	clip-path: polygon(
		0% 0%,
		33% 0%,
		33% 66%,
		66% 66%,
		66% 0%,
		100% 0%,
		100% 100%,
		0% 100%
	);
	position: absolute;
	z-index:.........完整代码请登录后点击上方下载按钮下载查看