Wie erstelle ich einen benutzerdefinierten CSS3-Ladekreis?

Question

Ich möchte CSS3 Ladekreis wie diese erstellen:

der innere Kreis Timer wird wachsen.

das Problem, was ist die Technik, die ich verwenden kann, um den inneren Kreis wie diesen zu wachsen?

Ich habe diese CSS-Code:

.circle { 
width:100px; 
height:100px; 
border-radius:50px; 
background:#fff; 
} 

.circle ist nur ein div

der äußere Kreis kann als Hintergrundbild verwendet werden, weil es statisch sein wird. es wird sich nie ändern, nur der innere wird sich je nach Timer ändern.

Answer 1

<style> 
#floatingCirclesG{ 
position:relative; 
width:128px; 
height:128px; 
-moz-transform:scale(0.6); 
-webkit-transform:scale(0.6); 
-ms-transform:scale(0.6); 
-o-transform:scale(0.6); 
transform:scale(0.6); 
} 

.f_circleG{ 
position:absolute; 
background-color:#FFFFFF; 
height:23px; 
width:23px; 
-moz-border-radius:12px; 
-moz-animation-name:f_fadeG; 
-moz-animation-duration:1.04s; 
-moz-animation-iteration-count:infinite; 
-moz-animation-direction:linear; 
-webkit-border-radius:12px; 
-webkit-animation-name:f_fadeG; 
-webkit-animation-duration:1.04s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-direction:linear; 
-ms-border-radius:12px; 
-ms-animation-name:f_fadeG; 
-ms-animation-duration:1.04s; 
-ms-animation-iteration-count:infinite; 
-ms-animation-direction:linear; 
-o-border-radius:12px; 
-o-animation-name:f_fadeG; 
-o-animation-duration:1.04s; 
-o-animation-iteration-count:infinite; 
-o-animation-direction:linear; 
border-radius:12px; 
animation-name:f_fadeG; 
animation-duration:1.04s; 
animation-iteration-count:infinite; 
animation-direction:linear; 
} 

#frotateG_01{ 
left:0; 
top:52px; 
-moz-animation-delay:0.39s; 
-webkit-animation-delay:0.39s; 
-ms-animation-delay:0.39s; 
-o-animation-delay:0.39s; 
animation-delay:0.39s; 
} 

#frotateG_02{ 
left:15px; 
top:15px; 
-moz-animation-delay:0.52s; 
-webkit-animation-delay:0.52s; 
-ms-animation-delay:0.52s; 
-o-animation-delay:0.52s; 
animation-delay:0.52s; 
} 

#frotateG_03{ 
left:52px; 
top:0; 
-moz-animation-delay:0.65s; 
-webkit-animation-delay:0.65s; 
-ms-animation-delay:0.65s; 
-o-animation-delay:0.65s; 
animation-delay:0.65s; 
} 

#frotateG_04{ 
right:15px; 
top:15px; 
-moz-animation-delay:0.78s; 
-webkit-animation-delay:0.78s; 
-ms-animation-delay:0.78s; 
-o-animation-delay:0.78s; 
animation-delay:0.78s; 
} 

#frotateG_05{ 
right:0; 
top:52px; 
-moz-animation-delay:0.91s; 
-webkit-animation-delay:0.91s; 
-ms-animation-delay:0.91s; 
-o-animation-delay:0.91s; 
animation-delay:0.91s; 
} 

#frotateG_06{ 
right:15px; 
bottom:15px; 
-moz-animation-delay:1.04s; 
-webkit-animation-delay:1.04s; 
-ms-animation-delay:1.04s; 
-o-animation-delay:1.04s; 
animation-delay:1.04s; 
} 

#frotateG_07{ 
left:52px; 
bottom:0; 
-moz-animation-delay:1.17s; 
-webkit-animation-delay:1.17s; 
-ms-animation-delay:1.17s; 
-o-animation-delay:1.17s; 
animation-delay:1.17s; 
} 

#frotateG_08{ 
left:15px; 
bottom:15px; 
-moz-animation-delay:1.3s; 
-webkit-animation-delay:1.3s; 
-ms-animation-delay:1.3s; 
-o-animation-delay:1.3s; 
animation-delay:1.3s; 
} 

@-moz-keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

@-webkit-keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

@-ms-keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

@-o-keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

@keyframes f_fadeG{ 
0%{ 
background-color:#000000} 

100%{ 
background-color:#FFFFFF} 

} 

</style> 
<div id="floatingCirclesG"> 
<div class="f_circleG" id="frotateG_01"> 
</div> 
<div class="f_circleG" id="frotateG_02"> 
</div> 
<div class="f_circleG" id="frotateG_03"> 
</div> 
<div class="f_circleG" id="frotateG_04"> 
</div> 
<div class="f_circleG" id="frotateG_05"> 
</div> 
<div class="f_circleG" id="frotateG_06"> 
</div> 
<div class="f_circleG" id="frotateG_07"> 
</div> 
<div class="f_circleG" id="frotateG_08"> 
</div> 
</div> 

Um solche Loader zu erstellen, geben Sie http://cssload.net/

Answer 2

HTML

In diesem ersten Beispiel kann versuchen, schaffen nur zwei div und dank der border-radius Eigenschaft, werden sie die Kreisform nehmen.

<div class="ball"></div> 
<div class="ball1"></div> 

CSS

Für den CSS-Stil ist sehr einfach, nur mit den Parametern für die Grafik spielen Sie wollen, im Hinblick auf die Animation einfach die Transformation verwenden: rotateproperty.

.ball { 
    background-color: rgba(0,0,0,0); 
    border: 5px solid rgba(0,183,229,0.9); 
    opacity: .9; 
    border-top: 5px solid rgba(0,0,0,0); 
    border-left: 5px solid rgba(0,0,0,0); 
    border-radius: 50px; 
    box-shadow: 0 0 35px #2187e7; 
    width: 50px; 
    height: 50px; 
    margin: 0 auto; 
    -moz-animation: spin .5s infinite linear; 
    -webkit-animation: spin .5s infinite linear; 
} 

.ball1 { 
    background-color: rgba(0,0,0,0); 
    border: 5px solid rgba(0,183,229,0.9); 
    opacity: .9; 
    border-top: 5px solid rgba(0,0,0,0); 
    border-left: 5px solid rgba(0,0,0,0); 
    border-radius: 50px; 
    box-shadow: 0 0 15px #2187e7; 
    width: 30px; 
    height: 30px; 
    margin: 0 auto; 
    position: relative; 
    top: -50px; 
    -moz-animation: spinoff .5s infinite linear; 
    -webkit-animation: spinoff .5s infinite linear; 
} 

@-moz-keyframes spin { 
    0% { 
     -moz-transform: rotate(0deg); 
    } 

    100% { 
     -moz-transform: rotate(360deg); 
    }; 
} 

@-moz-keyframes spinoff { 
    0% { 
     -moz-transform: rotate(0deg); 
    } 

    100% { 
     -moz-transform: rotate(-360deg); 
    }; 
} 

@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(360deg); 
    }; 
} 

@-webkit-keyframes spinoff { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(-360deg); 
    }; 
} 

Zweites Beispiel CSS3 Laden Animationsloop HTML

Das zweite Beispiel ist der gleiche wie der Präzedenzfall für die Markup, der Hauptunterschied Sie es in der CSS finden.

<div class="circle"></div> 
<div class="circle1"></div> 

CSS

einfach wir in diesem Beispiel auf die Rotation handeln werden, und fügen wir eine Animation, die uns einen Impuls Wirkung haben können. Dieser Effekt ist nur im ersten Kreis aktiv.

.circle { 
    background-color: rgba(0,0,0,0); 
    border: 5px solid rgba(0,183,229,0.9); 
    opacity: .9; 
    border-right: 5px solid rgba(0,0,0,0); 
    border-left: 5px solid rgba(0,0,0,0); 
    border-radius: 50px; 
    box-shadow: 0 0 35px #2187e7; 
    width: 50px; 
    height: 50px; 
    margin: 0 auto; 
    -moz-animation: spinPulse 1s infinite ease-in-out; 
    -webkit-animation: spinPulse 1s infinite linear; 
} 

.circle1 { 
    background-color: rgba(0,0,0,0); 
    border: 5px solid rgba(0,183,229,0.9); 
    opacity: .9; 
    border-left: 5px solid rgba(0,0,0,0); 
    border-right: 5px solid rgba(0,0,0,0); 
    border-radius: 50px; 
    box-shadow: 0 0 15px #2187e7; 
    width: 30px; 
    height: 30px; 
    margin: 0 auto; 
    position: relative; 
    top: -50px; 
    -moz-animation: spinoffPulse 1s infinite linear; 
    -webkit-animation: spinoffPulse 1s infinite linear; 
} 

@-moz-keyframes spinPulse { 
    0% { 
     -moz-transform: rotate(160deg); 
     opacity: 0; 
     box-shadow: 0 0 1px #2187e7; 
    } 

    50% { 
     -moz-transform: rotate(145deg); 
     opacity: 1; 
    } 

    100% { 
     -moz-transform: rotate(-320deg); 
     opacity: 0; 
    }; 
} 

@-moz-keyframes spinoffPulse { 
    0% { 
     -moz-transform: rotate(0deg); 
    } 

    100% { 
     -moz-transform: rotate(360deg); 
    }; 
} 

@-webkit-keyframes spinPulse { 
    0% { 
     -webkit-transform: rotate(160deg); 
     opacity: 0; 
     box-shadow: 0 0 1px #2187e7; 
    } 

    50% { 
     -webkit-transform: rotate(145deg); 
     opacity: 1; 
    } 

    100% { 
     -webkit-transform: rotate(-320deg); 
     opacity: 0; 
    }; 
} 

@-webkit-keyframes spinoffPulse { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(360deg); 
    }; 
} 

Drittes Beispiel CSS3 Laden Animationsloop HTML

In diesem jüngsten Beispiel finden wir eine einfache Schleife, die durch die Transformation animiert: scale Eigenschaft. Das Markup ist länger als seine Vorgänger, aber dies kann je nach den Blöcken, die Sie einfügen möchten, variieren.

<div id="block_1" class="barlittle"></div> 
<div id="block_2" class="barlittle"></div> 
<div id="block_3" class="barlittle"></div> 
<div id="block_4" class="barlittle"></div> 
<div id="block_5" class="barlittle"></div> 

CSS

Hier ist der Stil ist viel einfacher zu handhaben, da wir den Effekt zu Animation nehmen gehen anzuwenden: Verzögerung Eigenschaft eines jeden Blockes.

.barlittle { 
    background-color: #2187e7; 
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff); 
    border-left: 1px solid #111; 
    border-top: 1px solid #111; 
    border-right: 1px solid #333; 
    border-bottom: 1px solid #333; 
    width: 10px; 
    height: 10px; 
    float: left; 
    margin-left: 5px; 
    opacity: 0.1; 
    -moz-transform: scale(0.7); 
    -webkit-transform: scale(0.7); 
    -moz-animation: move 1s infinite linear; 
    -webkit-animation: move 1s infinite linear; 
} 

#block_1 { 
    -moz-animation-delay: .4s; 
    -webkit-animation-delay: .4s; 
} 

#block_2 { 
    -moz-animation-delay: .3s; 
    -webkit-animation-delay: .3s; 
} 

#block_3 { 
    -moz-animation-delay: .2s; 
    -webkit-animation-delay: .2s; 
} 

#block_4 { 
    -moz-animation-delay: .3s; 
    -webkit-animation-delay: .3s; 
} 

#block_5 { 
    -moz-animation-delay: .4s; 
    -webkit-animation-delay: .4s; 
} 

@-moz-keyframes move { 
    0% { 
     -moz-transform: scale(1.2); 
     opacity: 1; 
    } 

    100% { 
     -moz-transform: scale(0.7); 
     opacity: 0.1; 
    }; 
} 

@-webkit-keyframes move { 
    0% { 
     -webkit-transform: scale(1.2); 
     opacity: 1; 
    } 

    100% { 
     -webkit-transform: scale(0.7); 
     opacity: 0.1; 
    }; 
} 

Fazit

Ich hoffe, dass Sie mit diesem Tutorial gelernt, wie man einfache Animationen Schleife erstellen, die nur die CSS3-Eigenschaften verwenden.