純css閃爍效果


.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);
        /*-webkit-transform: scale(0.8);*///縮小
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM