css3按钮动态光影滑过效果

浏览：720次- 评论：0次- 发布时间：2019-05-27

Html

Css

.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

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：css3按钮动态效果，透明动画遮罩，白色透明遮罩移动css3按钮光效伪类元素,纯css3利用伪类元素进行按钮上光效的左右移动

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

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取