CSS动画按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45758314/article/details/103395671

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
			}
			html, body {
				height: 100%;
				overflow: hidden;
			}
			body{
				background: #191919;
				display: flex; /*布局   应用于容器中，也可以应用于行内元素*/
				align-items: center; /*y轴居中*/
				justify-content: center; /*内容向中间对齐*/
			}
			#button{
				background-image: linear-gradient(90deg,#00C0FF,#FFCF00,#FC4F4F);
				display: inline-block;
				padding: 3px;
				border-radius: 7px;
				text-decoration: none;
				animation:randommove 10s linear infinite;
			}
			#button:hover{
				animation:randombackground 10s linear infinite;
			}
			#button span{
				display: inline-block;
				background: #191919;
				color: white;
				padding: 30px 60px;
				border-radius: 7px;
				font-size: 30px;
				font-weight: 800;
				text-transform: uppercase; /*强制字体为大写*/
			}
			@keyframes randommove{
				from{background-position: 0 0;}
				to{background-position: 1000px 0;}
			}
			@keyframes randombackground{
				0%{top:0px; left:0px; background:red;}
				25%{top:0px; left:100px; background:blue;}
				50%{top:100px; left:100px; background:yellow;}
				75%{top:100px; left:0px; background:green;}
				100%{top:0px; left:0px; background:red;}

		</style>
	</head>
	<body>
		<a href="#" id="button">
			<span>Button</span>
		</a>
	</body>
</html>