css鼠标滑过按钮出现flash闪光效果

html代码如下

<div class="btn-home">
	这是一个按钮
	<div class="line"></div>
</div>           

css代码如下

查看代码

.btn-home{
	position: relative;
	background-color: #fa5e2e;
	border: 1px solid #fa5e2e;
	height: 44px;
	width: 250px;
	text-align: center;
	line-height: 44px;
	color: #FFF;
	letter-spacing: 0.5px;
}
.btn-home:hover {
		background-color: #ec6a42
	}
.btn-home:hover .line:after {
		transform: skewX(-45deg) translateX(25em);
		transition: all 1s ease;
	}

.btn-home .line:after {
		content: "";
		background-color: hsla(0,0%,100%,.4);
		height: 44px;
		width: 3em;
		display: block;
		position: absolute;
		bottom: 0;
		left: -40%;
		transform: skewX(-45deg) translateX(0);
		transition: none;
	}           

 其他网站效果地址演示：https://www.html5tricks.com/css3-hover-shine-button.html

本文来自博客园，作者：蹦极的考拉，转载请注明原文链接：https://www.cnblogs.com/fu7n/p/15864830.html