這篇文章將為大家詳細(xì)講解有關(guān)css+html怎么實(shí)現(xiàn)Skeleton Screen加載占位圖動(dòng)畫效果,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的石林網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
效果
自上而下漸隱漸現(xiàn)
源碼
html,用的angular語法,只要做簡單的修改就可以成為你需要的語法
css
.skeletonItem { padding: 16px; border-bottom: 3px solid #eee; } .skeletonText { height: 16px; background: #e2e2e2; margin-top: 12px; border-radius: 4px; } .skeletonText:first-child { margin-top: 0; } .anim-opacity2 { animation: 1.5s opacity2 0s infinite; } .animation-delay0 { animation-delay: 0s; } .animation-delay1 { animation-delay: 0.5s; } .animation-delay2 { animation-delay: 1s; } @keyframes opacity2 { 0% { opacity: 0.5 } 50% { opacity: 1; } 100% { opacity: 0.5; } }
關(guān)于“css+html怎么實(shí)現(xiàn)Skeleton Screen加載占位圖動(dòng)畫效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。