使用Html和CSS动画效果悬停时发光的渐变按钮动画效果

使用Html和CSS动画效果悬停时发光的渐变按钮动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		body{
			margin: 0;
			padding: 0;
			background: #000;
		}
		a{
			position: absolute;
			top: 50%;	
			left: 50%;
			transform: translate(-50%,-50%);
			width: 200px;
			height: 60px;
			text-align: center;
			line-height: 60px;
			color: #fff;
			font-size: 24px;
			text-transform: uppercase;
			text-decoration: none;
			font-family: sans-serif;
			box-sizing: border-box;
			background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
			background-size: 400%;
			border-radius: 30px;
		}
		a:hover{
			animation:animate 8s linear infinite;
		}
		@keyframes animate{
			0%{
				background-position: 0%;
			}
			100%{
				background-position: 400%;
			}
		}
		a:before{
			content: '';
			position: absolute;
			top: -5px;
			left: -5px;
			right: -5px;
			bottom: -5px;
			z-index: -1;
			background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
			background-size: 400%;
			border-radius: 40px;
			opacity: 0;
			transition: 0.5s;
		}
		a:hover:before{
			opacity: 1;
			filter: blur(20px);
		}
	</style>
	<body>
		<a href="#">Button</a>
	</body>
</html>

代码来源于视频:https://www.youtube.com/watch?v=pdH5X2mXzPk&feature=youtu.be

你可能感兴趣的:(css效果)