CSS實(shí)現(xiàn)div閃爍的方法

這篇文章主要介紹“CSS實(shí)現(xiàn)div閃爍的方法”，在日常操作中，相信很多人在CSS實(shí)現(xiàn)div閃爍的方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS實(shí)現(xiàn)div閃爍的方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

在css中，可以使用“@keyframes”規(guī)則和animation屬性來實(shí)現(xiàn)div閃爍效果；只需要先使用“@keyframes”創(chuàng)建具有閃爍效果的動(dòng)畫；然后使用animation屬性設(shè)置動(dòng)畫所需時(shí)間，速度以及次數(shù)等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

效果圖如下

代碼如下

@keyframes fade {
    from {        
    opacity: 1.0;    
    }
    50% {        
    opacity: 0.4;    
    }
    to {        
    opacity: 1.0;    
    }
}
@-webkit-keyframes fade {    
    from {        
    opacity: 1.0;    
    }
    50% {        
    opacity: 0.4;    
    }
    to {        
    opacity: 1.0;    
    }
}
.headerBox {    
    color: #fff;    
    padding: 10px;    
    font-size: 15px;    
    height: 60px;    
    animation: fade 600ms infinite;    
    -webkit-animation: fade 600ms infinite;
}

給div設(shè)置headerBox 樣式即可

到此，關(guān)于“CSS實(shí)現(xiàn)div閃爍的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！