您的当前位置:首页>全部文章>文章详情
CSS 按钮闪烁动画
发表于:2021-12-28浏览:34次TAG: #animation #css闪烁

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>

更多内容参见 https://zhuanlan.zhihu.com/p/142692578

标签云