成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3 loading

wuaiqiu / 2280人閱讀

摘要：效果一效果二藍(lán)到淺藍(lán)漸變右半圓環(huán)淺藍(lán)到白色漸變左半圓環(huán)效果三參考文章

效果一

HTML

CSS

.zh-loading{position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.75);}
.zh-loading ul{position: absolute;z-index: 2;left: 50%;top: 50%;height: 60px;overflow: hidden;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.zh-loading ul li{float: left;height: 100%;width: 4px;margin: 0 2px;background-color: #ccc;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;}
.zh-loading ul li:nth-of-type(2){-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
.zh-loading ul li:nth-of-type(3){-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
.zh-loading ul li:nth-of-type(4){-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
@-webkit-keyframes stretchdelay{0%, 40%, 100%{-webkit-transform: scaleY(0.4)}
20%{-webkit-transform: scaleY(1.0)}}
@keyframes stretchdelay{0%, 40%, 100%{transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}
20%{transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}

效果二

效果三

HTML

CSS

.zh-loading{display: none;margin: 1rem auto 0;width: 34px;height: 34px;}
.zh-loading li{float: left;width: 14px;height: 14px;margin: 2px 0 0 2px;background-color: #F2F2F2;}
.zh-loading li:nth-of-type(1){-webkit-animation: loadingEffect 1s ease 1s infinite;-ms-animation: loadingEffect 1s ease 1s infinite;animation: loadingEffect 1s ease 1s infinite;}
.zh-loading li:nth-of-type(2){-webkit-animation: loadingEffect 1s ease .25s infinite;-ms-animation: loadingEffect 1s ease .25s infinite;animation: loadingEffect 1s ease .25s infinite;}
.zh-loading li:nth-of-type(3){-webkit-animation: loadingEffect 1s ease .75s infinite;-ms-animation: loadingEffect 1s ease .75s infinite;animation: loadingEffect 1s ease .75s infinite;}
.zh-loading li:nth-of-type(4){-webkit-animation: loadingEffect 1s ease .5s infinite;-ms-animation: loadingEffect 1s ease .5s infinite;animation: loadingEffect 1s ease .5s infinite;}
@-webkit-keyframes loadingEffect{
    to{background-color: #BCBCBC;}
}
@-ms-keyframes loadingEffect{
    to{background-color: #BCBCBC;}
}
@keyframes loadingEffect{
    to{background-color: #BCBCBC;}
}

參考文章：
http://www.cnblogs.com/lhb25/...
https://www.jianshu.com/p/0cc...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116609.html

相關(guān)文章

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

    摘要：主要用到的知識(shí)點(diǎn)參閱菜鳥教程動(dòng)畫延時(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)： 參閱菜鳥教程： http://www.runoob...

    546669204 評(píng)論0 收藏0

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

    摘要：主要用到的知識(shí)點(diǎn)參閱菜鳥教程動(dòng)畫延時(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)： 參閱菜鳥教程： http://www.runoob...

    canopus4u 評(píng)論0 收藏0

  • 進(jìn)入 CSS3 動(dòng)畫

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

    lindroid 評(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 評(píng)論0 收藏0

  • css3 loading

    摘要：動(dòng)畫 css /*loading動(dòng)畫*/ #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;...

    testbird 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<