1. 首页
  2. 问答
  3. 如何创建自定义CSS3加载圈？

如何创建自定义CSS3加载圈？

2013-04-05 62 views
9

我要创建CSS3加载圈像这样的：如何创建自定义CSS3加载圈？

enter image description here

内圆将使用定时器增长。

问题我可以用这种方法来增长内圈的技术是什么？

我有这样的CSS代码：

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

.circle只是一个div

外圈可以作为背景图像，因为它是静态的。它永远不会改变，只有内在的一个会根据计时器而改变。

来源

2013-04-05 Saleh

+0

http://www.sitepoint.com/css3-ajax-loading-icon/ – Ian 2013-04-05 16:06:51

+1

您可能可以调整CSS技巧演示http://css-tricks.com/css-pie-timer/ – andyb 2013-04-06 18:25:51

+0

@ andyb非常感谢你，这就是我要找的 – Saleh 2013-04-07 17:02:56

回答

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>

要创建这样装载机，您可以尝试http://cssload.net/

来源

2013-04-05 16:09:24 harishannam

+0

下面是你的代码示例：http://jsfiddle.net/kekSd/ – Ian 2013-04-05 16:10:43

5

HTML

在第一个例子，创建只有两格，并感谢边界半径财产，他们将采取圆形。

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

CSS

对于CSS样式非常简单，只需用你想要的图形的参数发挥，至于动画只需使用变换：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); 
    }; 
}

第二个例子CSS3加载动画循环 HTML

第二个例子是一样的先例标记，你会发现它在CSS的主要区别。

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

CSS

只需在这个例子中，我们要采取行动的旋转，更我们插入的动画，这将使我们有一个脉冲效应。 此效果仅在第一个圈中有效。

.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); 
    }; 
}

第三个例子CSS3加载动画循环 HTML

在这个最新的例子，我们发现一个简单的循环，是动画得益于变换：scale属性。 标记比其前任更长，但这可能会根据要插入的块而有所不同。

<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

这里的风格是很容易处理，因为我们将要采取的效果应用到动画：每个块的延迟特性。

.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; 
    }; 
}

结论

我希望本教程学习了如何只使用CSS3属性来创建简单的动画循环。

来源

2013-04-05 16:10:57 Hydroid

相关问题

 相关问题