CSS 按钮闪烁动画
发表于:2021-12-28浏览:34次
css 样式
/**** 立即提交 动态效果 ****/
@keyframes fadeSubmit {
0% {
width: 95%;
font-size: 18px;
}
12.5% {
width: 92%;
font-size: 17px;
}
25% {
width: 95%;
font-size: 18px;
}
37.5% {
width: 92%;
font-size: 17px;
}
50% {
width: 95%;
font-size: 18px;
}
100% {
width: 95%;
font-size: 18px;
}
}
@-webkit-keyframes fadeSubmit {
0% {
width: 95%;
font-size: 18px;
}
12.5% {
width: 92%;
font-size: 17px;
}
25% {
width: 95%;
font-size: 18px;
}
37.5% {
width: 92%;
font-size: 17px;
}
50% {
width: 95%;
font-size: 18px;
}
100% {
width: 95%;
font-size: 18px;
}
}
.form-submit {
-webkit-animation: fadeSubmit 4s linear infinite;
animation: fadeSubmit 4s linear infinite;
/*font-size: 0.962409rem;*/
background-color: #ff0000 !important;
}
/***** 按钮上面闪动效果 *****/
@keyframes changeImg {
from {
left:-100%;
}
100% {
left:150%;
}
}
@-webkit-keyframes changeImg {
from {
left:-100%;
}
100% {
left:150%;
}
}
.flash-across {
position: absolute;
animation: changeImg 3s ease 0s;
width: 30%;
height: 38px;
background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
transform: skewX(-45deg);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
z-index: 9999;
}html
<label id="{$vo.name.'submit'}" class="layui-btn layui-btn-radius layui-btn-danger form-submit">
<i class="flash-across"></i>
立即提交
</label> 