css3 loading

testbird 發(fā)布于2019-08-29 12:51 / 588人閱讀

摘要：動(dòng)畫(huà)

css

/*loading動(dòng)畫(huà)*/
#pageLoading{width: 40px;height: 40px;position: fixed;margin: auto;top: 0px;left: 0px;right: 0px;bottom: 0px;}
#pageLoading div {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
#pageLoading div:before {content: "";display: block;margin: 0 auto;width: 15%;height: 15%;background-color: #eee;border-radius: 100%;}
#pageLoading .sk-circle1 { transform: rotate(45deg);}
#pageLoading .sk-circle2 { transform: rotate(90deg);}
#pageLoading .sk-circle3 { transform: rotate(135deg);}
#pageLoading .sk-circle4 { transform: rotate(180deg);}
#pageLoading .sk-circle5 { transform: rotate(225deg);}
#pageLoading .sk-circle6 { transform: rotate(270deg);}
#pageLoading .sk-circle7 { transform: rotate(315deg);}
@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}
#pageLoading .sk-circle:before {
  animation: sk-circleFadeDelay 0.8s infinite ease-in-out both;
}
#pageLoading .sk-circle0:before { animation-delay: -0.8s; }
#pageLoading .sk-circle1:before { animation-delay: -0.7s; }
#pageLoading .sk-circle2:before { animation-delay: -0.6s; }
#pageLoading .sk-circle3:before { animation-delay: -0.5s; }
#pageLoading .sk-circle4:before { animation-delay: -0.4s; }
#pageLoading .sk-circle5:before { animation-delay: -0.3s; }
#pageLoading .sk-circle6:before { animation-delay: -0.2s; }
#pageLoading .sk-circle7:before { animation-delay: -0.1s; }

dom

GPU云服務(wù)器云服務(wù)器 css3loadding load() loaded loading

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112188.html

相關(guān)文章

用 CSS3 動(dòng)畫(huà)功能，做一個(gè)有逼格的加載動(dòng)畫(huà)

摘要：主要用到的知識(shí)點(diǎn)參閱菜鳥(niǎo)教程動(dòng)畫(huà)延時(shí)實(shí)現(xiàn)說(shuō)明用于區(qū)別四個(gè)不同點(diǎn)，里放通用樣式重點(diǎn)如果了解，看這個(gè)更清晰些，如果不懂，看下面生成的定死容器的高度，不然會(huì)上下浮動(dòng)橫向排列子元素縱向排列子元素去掉最后一個(gè) showImg(https://segmentfault.com/img/bVbqZDr?w=936&h=432); 主要用到的知識(shí)點(diǎn)：參閱菜鳥(niǎo)教程： http://www.runoob...

546669204 2019-08-02 16:11 評(píng)論0 收藏0
用 CSS3 動(dòng)畫(huà)功能，做一個(gè)有逼格的加載動(dòng)畫(huà)

摘要：主要用到的知識(shí)點(diǎn)參閱菜鳥(niǎo)教程動(dòng)畫(huà)延時(shí)實(shí)現(xiàn)說(shuō)明用于區(qū)別四個(gè)不同點(diǎn)，里放通用樣式重點(diǎn)如果了解，看這個(gè)更清晰些，如果不懂，看下面生成的定死容器的高度，不然會(huì)上下浮動(dòng)橫向排列子元素縱向排列子元素去掉最后一個(gè) showImg(https://segmentfault.com/img/bVbqZDr?w=936&h=432); 主要用到的知識(shí)點(diǎn)：參閱菜鳥(niǎo)教程： http://www.runoob...

canopus4u 2019-08-29 18:31 評(píng)論0 收藏0
進(jìn)入 CSS3 動(dòng)畫(huà)

摘要：我最近有機(jī)會(huì)深入研究一些動(dòng)畫(huà)。下一步是添加動(dòng)畫(huà)效果并確定它們何時(shí)發(fā)生。創(chuàng)建關(guān)鍵幀后，您可以將動(dòng)畫(huà)稱為屬性。點(diǎn)擊動(dòng)畫(huà)使用上面的關(guān)鍵幀和動(dòng)畫(huà)語(yǔ)法，這里是我用來(lái)在本頁(yè)頂部的中制作動(dòng)畫(huà)的代碼。我最近有機(jī)會(huì)深入研究一些CSS3動(dòng)畫(huà)。我使用了像animate.css這樣的庫(kù)，用javascript完成了動(dòng)畫(huà)，但從未做過(guò)任何自定義的CSS3工作原文任務(wù) 我們最近在SeatGeek更新了我們的...

lindroid 2019-08-30 15:44 評(píng)論0 收藏0
css3 loading

摘要：效果一效果二藍(lán)到淺藍(lán)漸變右半圓環(huán)淺藍(lán)到白色漸變左半圓環(huán)效果三參考文章效果一 showImg(https://segmentfault.com/img/bVLlDy?w=204&h=192); HTML CSS .zh-loading{position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;backg...

wuaiqiu 2019-08-30 15:53 評(píng)論0 收藏0
css3效果大集合（1）

摘要：背景漸變色效果標(biāo)準(zhǔn)的語(yǔ)法三角形效果圓環(huán)效果上下跳動(dòng)加載效果代碼文章鏈接 1、背景漸變色效果 .main{ background: -webkit-linear-gradient(#a18cd1, #fbc2eb); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(#a18cd1, #fbc2eb...

teren 2019-08-30 15:44 評(píng)論0 收藏0