卡卡網(wǎng)

本文介紹一個(gè)純CSS3實(shí)現(xiàn)的loading加載動(dòng)畫，是一個(gè)圓形滾動(dòng)的效果。

demodownload

HTML

<div class="div1">
    <span class="span1"></span>
    <span class="span2"></span>
    <span class="span3"></span>
    <span class="span4"></span>
</div>
<div class="div2">
    <span class="span1"></span>
    <span class="span2"></span>
    <span class="span3"></span>
    <span class="span4"></span>
</div>

HTML結(jié)構(gòu)有兩個(gè)DIV標(biāo)簽，它們的class值分別為div1和div2。

每個(gè)DIV里面有4個(gè)span標(biāo)簽，它們的class值依次為span1、span2、span3、span4。

CSS

div {
    position: absolute;
    top: 200px;
    left: 500px;
    width: 50px;
    height: 50px;

}

div span {
    display: inline-block;
    height: 10px;
    width: 10px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
}

.div2 {
    transform: rotate(45deg);
}

@keyframes dh {
    0% {
        transform: scale(0.5);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(0.5);
    }
}

div span {
    animation: dh 1s linear infinite;
}

.div1 .span1 {
    left: 0;
    top: 0;
    animation-delay: 0s;
}

.div2 .span1 {
    left: 0;
    top: 0;
    animation-delay: 0.125s;
}

.div1 .span2 {
    top: 0;
    right: 0;
    animation-delay: 0.25s;
}

.div2 .span2 {
    top: 0;
    right: 0;
    animation-delay: 0.375s;
}

.div1 .span3 {
    bottom: 0;
    right: 0;
    animation-delay: 0.5s;
}

.div2 .span3 {
    bottom: 0;
    right: 0;
    animation-delay: 0.625s;
}

.div1 .span4 {
    bottom: 0;
    left: 0;
    animation-delay: 0.75s;
}

.div2 .span4 {
    bottom: 0;
    left: 0;
    animation-delay: 0.875s;
}

div定義圓的大小，該實(shí)例圓的高(height)、寬(width)均為50px。

div span {}定義滾動(dòng)小圓的大小、顏色等樣式。

transform: rotate(45deg);是定義動(dòng)畫轉(zhuǎn)動(dòng)45度。

transform: scale(n); 是定義動(dòng)畫縮小或放大n倍。

animation: dh 1s linear infinite;是定義動(dòng)畫執(zhí)行時(shí)間為1s，linear是表示勻速進(jìn)行，infinite是表示循環(huán)執(zhí)行。

animation-delay表示動(dòng)畫延遲執(zhí)行時(shí)間。實(shí)例里有8個(gè)span，表示有8個(gè)小圓，使用animation-delay屬性，讓不同圓在不同時(shí)間運(yùn)行動(dòng)畫，從而從整體視覺上看似整個(gè)大圓在做圓周滾動(dòng)。

總結(jié)

本文介紹了一個(gè)css3實(shí)現(xiàn)的loading加載動(dòng)畫圓形滾動(dòng)效果，實(shí)例主要使用了animation等動(dòng)畫屬性來實(shí)現(xiàn)。animation是css3實(shí)現(xiàn)動(dòng)畫的主要屬性，你可以用它來輕松實(shí)現(xiàn)各種實(shí)用的動(dòng)畫，參看此文《詳解 CSS3 animation 6個(gè)動(dòng)畫屬性》了解更多。

您可能對(duì)以下文章也感興趣

• 純CSS實(shí)現(xiàn)的轉(zhuǎn)動(dòng)的圓環(huán)加載動(dòng)畫
• CSS loading加載動(dòng)畫(旋轉(zhuǎn)的圓環(huán))
• CSS3 loading預(yù)加載動(dòng)畫旋轉(zhuǎn)的圓弧【演示/源碼下載】
• 4個(gè)漂亮的CSS3 Loading預(yù)加載動(dòng)畫實(shí)例
• CSS3 Loading 旋轉(zhuǎn)圓盤加載動(dòng)畫
• CSS3 loading音波效果預(yù)加載動(dòng)畫
• CSS3 Loading預(yù)加載動(dòng)畫8個(gè)常見實(shí)例
• CSS Loading 左右滾動(dòng)加載動(dòng)畫等5實(shí)例【源碼下載】

標(biāo)簽: css3-loading  圓形滾動(dòng)效果  css-loading  加載動(dòng)畫