卡卡網(wǎng)

前面介紹過(guò)多個(gè)css3 loading加載動(dòng)畫(huà)的實(shí)例，今天繼續(xù)介紹另一個(gè)實(shí)例，這個(gè)實(shí)例用css3實(shí)現(xiàn)旋轉(zhuǎn)圓盤(pán)的預(yù)加載動(dòng)畫(huà)。

css代碼

#preloader{
position:relative;
width:30px;
height:30px;
background:#3498db;
border-radius:50px;
-webkit-animation: preloader_1 1.5s infinite linear;
-moz-animation: preloader_1 1.5s infinite linear;
-ms-animation: preloader_1 1.5s infinite linear;
animation: preloader_1 1.5s infinite linear;
}
#preloader:after{
position:absolute;
width:50px;
height:50px;
border-top:10px solid #9b59b6;
border-bottom:10px solid #9b59b6;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-radius:50px;
content:'';
top:-20px;
left:-20px;
-webkit-animation: preloader_1_after 1.5s infinite linear;
-moz-animation: preloader_1_after 1.5s infinite linear;
-ms-animation: preloader_1_after 1.5s infinite linear;
animation: preloader_1_after 1.5s infinite linear;
}


@-webkit-keyframes preloader_1 {
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(180deg);background:#2ecc71;}
    100% {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes preloader_1_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}


@-moz-keyframes preloader_1 {
    0% {-moz-transform: rotate(0deg);}
    50% {-moz-transform: rotate(180deg);background:#2ecc71;}
    100% {-moz-transform: rotate(360deg);}
}
@-moz-keyframes preloader_1_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

@-ms-keyframes preloader_1 {
    0% {-ms-transform: rotate(0deg);}
    50% {-ms-transform: rotate(180deg);background:#2ecc71;}
    100% {-ms-transform: rotate(360deg);}
}
@-ms-keyframes preloader_1_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

@keyframes preloader_1 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_1_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

html代碼

在這里，我們只需使用一個(gè)div作為中心圓，和在該div上用:after創(chuàng)建外部線條。

<div id="preloader"></div>

execcodegetcode

相關(guān)文章推薦

• CSS3 loading音波效果預(yù)加載動(dòng)畫(huà)
• 純css3音階波浪loading加載動(dòng)畫(huà)效果【源碼下載】
• CSS3 Loading預(yù)加載動(dòng)畫(huà)8個(gè)常見(jiàn)實(shí)例
• CSS Loading 左右滾動(dòng)加載動(dòng)畫(huà)等5實(shí)例【源碼下載】

標(biāo)簽: css  css3  css-loading  加載動(dòng)畫(huà)