svg+css实现高科技铃声按钮悬浮点击动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现高科技铃声按钮悬浮点击动画效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
  
  
  
<style>
* {
	box-sizing: border-box;
}

body,
html {
	overflow: hidden;
}

body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	margin: 0;
	background: black;
	color: #ccc;
}

button {
	position: relative;
	width: 100px;
	height: 100px;
	background-image: linear-gradient(
		120deg,
		#7afffb,
		#79fcff,
		#75eaff,
		#6eccff,
		#67a4ff,
		#5f73ff,
		#7156ff,
		#9b4eff,
		#c547ff,
		#e940ff,
		#ff3cfc,
		#ff3bf2
	);
	background-position: top left;
	background-size: 100%;
	box-shadow: 0px 0px 400px rgba(255, 59, 242, 1),
		0px 0px 200px rgba(255, 59, 242, 0.75), 0px 0px 100px rgba(255, 59, 242, 0.5),
		0px 0px 50px rgba(255, 59, 242, 0.35), 0px 0px 25px rgba(255, 59, 242, 0.2);
	border-radius: 100%;
	border: none;
	margin: 0;
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

button:hover {
	box-shadow: 0px 0px 400px rgba(122, 255, 251, 1),
		0px 0px 200px rgba(122, 255, 251, 0.75),
		0px 0px 100px rgba(122, 255, 251, 0.5), 0px 0px 50px rgba(122, 255, 251, 0.35),
		0px 0px 25px rgba(122, 255, 251, 0.2);
	padding: 20px;
	background-size: 180%;
	transition: all 0.3s ease;
}

button:active {
	transform: scale(0.9);
	transition: all 0.05s ease;
}

button::before {
	position: absolute;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	border: 1px solid rgba(255, 59, 242, 0.8);
	border-radius: 100%;
	pointer-events: none;
	content: "";
	transition: all 0.3s ease;
}

button:hover::before {
	border: 1px solid rgba(122, 255, 251, 0.6);
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	transition: all 0.3s ease;
}

button:active::before {
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	transition: all 0.07s ease;
}

button::after {
	position: absolute;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	border: 2px dashed rgba(255, 59, 242, 0.4);
	box-shadow: 0px 0px 100px rgba(122, 255, 251, 0.1);
	border-radius: 100%;
	pointer-events: none;
	animation: rotate 30s linear infinite;
	content: "";
	transition: all 0.3s ease;
}

@keyframes rotate {
	to {
		transform: rotateZ(-360deg);
	}
}

button:hover::after {
	border: 2px dashed rgba(122, 255, 251, 0.3);
	width: calc(100% + 80px);
	height: calc(100% + 80px);
	transition: all 0.3s ease;
}

button:active::after {
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	transition: all 0.07s ease;
}

button > svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	mix-blend-mode: overlay;
	transition: all 0.3s ease;
	z-index: 1;
}

button i {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

button i svg {
	position: relative;
	width: 100%;
	height: auto;
	filter: drop-shadow(0px 0px 5px white);
	mix-blend-mode: overlay;
}

button:hover i svg {
	animation: shake 0.5s linear infinite;
}

@keyframes shake {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(15deg);
	}
	75% {
		transform: rotate(-15deg);
	}
}

button span {
	position: absolute;
	top: -7px;
	right: -11px;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 2;
}

button:hover span {
	background-color: #333;
	transition: all 0.3s ease;
}

button span p {
	font: normal normal 400 14pt / 2cap "Roboto Mono", monospace;
	color: #ccc;
	margin: 0;
	position: relative;
	left: 1px;
}

button span svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

aside {
	position: absolute;
	font: normal normal 900 14pt / 2cap "Architects Daughter", cursive;
	bottom: 10%;
	color: #777;
	transition: all 0.3s ease;
}

button:hover ~ aside {
	opacity: 0;
	transition: all 0.3s ease;
}

@media (max-height: 270px) {
	aside {
		display: none;
	}
}
</style>



  
  
</head>

<body translate="no">
  <button type="button">
	<i>
		<svg viewBox="0 0 56 50" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M9.3999 44.0002V39.2102C9.3999 39.2102 14.2299 38.9702 14.2299 34.3802V19.1002C14.2299 19.1002 14.1799 6.43018 27.8599 6.43018C39.9199 6.43018 42.8599 13.4302 42.8599 18.6402V35.2302C42.8599 35.2302 42.4999 39.2302 47.6599 39.2302V44.0002H9.3999Z" stroke="black" stroke-width="3" stroke-dasharray="0,0,109.7099609375,27.427490234374993">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.4705882352941178s" values="0,0,109.7099609375,27.427490234374993; 
          0,27.427490234374993,109.7099609375,0; 
          109.7099609375,27.427490234374993,0,0" keyTimes="0; 0.19999999999999996; 1"></animate>
			</path>
			<path d="M32.24 6.78998V5.46998C32.24 4.47807 31.846 3.52679 31.1446 2.8254C30.4432 2.12402 29.4919 1.72998 28.5 1.72998C27.5081 1.72998 26.5568 2.12402 25.8554 2.8254C25.154 3.52679 24.76 4.47807 24.76 5.46998V6.66998" stroke="black" stroke-width="3" stroke-dasharray="0,0,11.415697479248047,2.853924369812011">
				<animate attributeType="XML" attribute.........完整代码请登录后点击上方下载按钮下载查看