Pure css flicker effect

.i-i-box-active{
    -webkit-animation: shan666 1s infinite ease-in-out;
    animation: shan666 1s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes shan666 {
    0% {
        opacity: 0.5;
        filter: alpha(opacity=20);
        /*-webkit-transform: scale(0.8);*///缩小
    }
    50% {
        opacity: 1;
        filter: alpha(opacity=50);
        /*-webkit-transform: scale(1.12);*///放大
        background-color: red;
        color: #fff;
    }
    100% {
        opacity: 0.5;
        filter: alpha(opacity=20);
        /*-webkit-transform: scale(0.8);*///缩小
    }
}

@keyframes shan666 {
    0% {
        opacity: 0.5;
        filter: alpha(opacity=20);
        /*-webkit-transform: scale(0.8);*///缩小
    }
    50% {
        opacity: 1;
        filter: alpha(opacity=50);
        /*-webkit-transform: scale(1.12);*///放大
        background-color: red;
        color: #fff;
    }
    100% {
        opacity: 0.5;
        filter:Alpha (Opacity = 20 is) ;
         / * -webkit-Transform: Scale (0.8); * / // reduction
     } 
}

 

Guess you like

Origin www.cnblogs.com/shark1100913/p/11124745.html