Html
    Css
    Js

    
                        
.buttonSublit {
	width:355px;
	height:55px;
	overflow:hidden;
	margin-top:10px;
}
.buttonSublit .subBtn {
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:16px;
	cursor:pointer;
	background:#ff4131;
	background:-webkit-linear-gradient(to right,#ff6131,#ff4131);
	background:linear-gradient(to right,#ff6131,#ff4131);
}
button {
	border:1px solid transparent;
	outline:none;
}
button:active,button:hover {
	background:#ec2e1d;
}
/* 交互class style */
.btnAnimation {
	position:relative;
	transition:all 0.5s;
}
.btnAnimation::after {
	position:absolute;
	content:"";
	display:block;
	width:200px;
	height:40px;
	bottom:-100%;
	left:-100%;
	transition:all 0.2s;
	background:rgba(255,255,255,0.3);
	transform:rotate(60deg);
	-o-animation:btnMove 1.5s infinite;
	-webkit-animation:btnMove 1.5s infinite;
	-moz-animation:btnMove 1.5s infinite;
	animation-delay:1s;
	-webkit-animation-delay:1s;
}
.btnAnimation::before {
	position:absolute;
	content:"";
	display:block;
	width:200px;
	height:40px;
	top:-100%;
	right:-100%;
	transition:all 0.2s;
	background:rgba(255,255,255,0.3);
	transform:rotate(60deg);
	-o-animation:btnMove-1 1.5s infinite;
	-webkit-animation:btnMove-1 1.5s infinite;
	-moz-animation:btnMove-1 1.5s infinite;
	animation-delay:1s;
	-webkit-animation-delay:1s;
}
@keyframes btnMove {
	0% {
	bottom:-100%;
	left:-100%;
	transition:all 0.2s;
}
100% {
	left:110%;
	bottom:110%;
	transition:all 0.2s;
}
}@keyframes btnMove-1 {
	0% {
	top:-100%;
	right:-100%;
	transition:all 0.2s;
}
100% {
	right:110%;
	top:110%;
	transition:all 0.2s;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3按钮动态光影滑过效果

更新时间:2020-05-14 10:45:24

利用css3的伪类在按钮前后分别做两个半透明白色长方形,旋转60度后再配合css3的从0到100帧的动画。即可完成此效果

1
      叔叔0
      2020/10/12 17:12:01
      bug提示:用了定位只有,光效在上层,经过时, a会短暂失链。解决方法自行给a用个层级哈各位 回复