css3高光滑过透明光亮遮罩动画按钮特效

css3高光滑过透明光亮遮罩动画按钮特效

知识点分析：

font-size: 20px;

/* 比如此时你设置了font-size：20px，之后你设置了line-height:1，

意思就是line-height:20px，行高为20px，( 是一种简化了的语句)*/

line-height: 1;

html:

<button class="btn shiny">注册</button>
<button class="btn shinydarken">登录</button>

css:

		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #e6f2d8;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Arial, Helvetica, sans-serif;
			}
			.btn{
				display: block;
				padding: 15px 25px;
				margin: 20px;
				outline: 0;
				border: 0;
				color: #fff;
				cursor: pointer;
				font-size: 20px;
				/* 比如此时你设置了font-size：20px，之后你设置了line-height:1，
				 意思就是line-height:20px，行高为20px，( 是一种简化了的语句)*/
				line-height: 1;
				background-color: #9ccc65;
				border-radius: 3px;
				box-shadow: 0 5px 10px rgba(0,0,0,0.1);
				position: relative;
				top: 0;
			}
			button.shiny{
				background-image: linear-gradient(-45deg, #9ccc65 50%, #cde5b2 60%, #9ccc65 70%);
				background-size: 600% 100%;
				animation: shine 20s linear infinite;
				animation-delay: 0s;
			}
			button.shinydarken{
				background-image: linear-gradient(-45deg, #9ccc65 50%, #699833 60%, #9ccc65 70%);
				background-size: 600% 100%;
				animation: shine 20s linear infinite;
				animation-delay: 0s;
			}
			@keyframes shine {
				0%{
					background-position-x: 400%;
				}
				50%{
					background-position-x: 0%;
				}
				100%{
					background-position-x: -400%;
				}
			}
		</style>