css+js实现中性化逃避点击的播放按钮效果代码-html代码-BFW代码库

css+js实现中性化逃避点击的播放按钮效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现中性化逃避点击的播放按钮效果代码

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

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

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

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,400;0,700;1,100&amp;display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,100,1,-25'>
  
<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	max-width: 100%;
	height: 100vh;

	display: flex;
	flex-direction: column;
	place-items: center;
	place-content: center;
	gap: 2rem;

	background: #e0e0e0;

	font-family: "Raleway", sans-serif;
}
h1 {
	font-size: xx-large;
	font-weight: 100;

	z-index: -10;
}
button {
	width: 100px;
	aspect-ratio: 1;

	font-size: x-large;
	color: grey;
	font-weight: 100;

	border: none;
	border-radius: 50%;

	background: rgba(224, 224, 224, 1);
	box-shadow: 11px 11px 21px #cecece, -11px -11px 21px #f2f2f2;

	transition: transform 0.2s ease;

	z-index: 10;
}

button:hover,
button:focus {
	cursor: pointer;
	color: dark-grey;
}

.pause {
	box-shadow: inset 11px 11px 21px #cecece, inset -11px -11px 21px #f2f2f2;
}

.material-symbols-outlined {
	font-size: 4rem;
}

.dot {
	width: 20px;
	aspect-ratio: 1;
	background: grey;
	border-radius: 100%;
	animation: dance 1.5s linear infinite;
}

@keyframes dance {
	0% {
		transform: translateX(-55vw) translateY(calc(10vh * sin(0deg)));
	}
	10% {
		transform: translateX(-40vw) translateY(calc(10vh * sin(45deg)));
	}
	20% {
		transform: translateX(-30vw) translateY(calc(10vh * sin(90deg)));
	}
	30% {
		transform: translateX(-20vw) translateY(calc(10vh * sin(180deg)));
	}
	40% {
		transform: translateX(-10vw) translateY(calc(10vh * sin(90deg)));
	}
	50% {
		transform: translateX(0) translateY(calc(10vh * sin(45deg)));
	}
	60% {
		transform: translateX(10vw) translateY(calc(10vh * sin(0deg)));
	}
	70% {
		transform: translateX(20vw) translateY(calc(10vh * sin(45deg)));
	}
	80% {
		transform: translateX(30vw) translateY(calc(10vh * sin(90deg)));
	}
	90% {
		transform: translateX(40vw) translateY(calc(10vh * sin(180deg)));
	}
	100% {
		transform: translateX(55vw) translateY(calc(10vh * sin(90deg)));
	}
}
</style>

  
  
</head>.........完整代码请登录后点击上方下载按钮下载查看