css实现炫酷鼠标悬停微光走光按钮动画代码

代码语言:html

所属分类:悬停

代码描述:css实现炫酷鼠标悬停微光走光按钮动画代码

代码标签: css 炫酷 鼠标 悬停 微光 走光 按钮 动画 代码

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

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

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

  
  
<style>

* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}
html,
body {
	margin: 0;
	padding: 0;
}
:root {
	--sz: clamp(16px, min(2vw, 3vh), 24px);
	font-size: var(--sz);
	--rotate-hour: 0;
}
body {
	display: grid;
	place-items: center;
	background: #1e1e1e;
	font-family: "Aeonik Pro Regular";
	height: 100vh;
	overflow: hidden;
}
body::after {
	content: "";
	z-index: 100;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, #000, #0000),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3C.........完整代码请登录后点击上方下载按钮下载查看

网友评论0