CSS3微调器，预加载器 [英] CSS3 spinner, preloader

问题描述

我想用CSS3建立一个动画旋转。
它的行为应该是这样：

I would like to build a animated spinner with CSS3. It should behave like this :

在最后一个状态之后，它应该像第一个状态一样重新开始。

After the last state it should start again like in the first state.

我设法使用此处解释的技术创建圈子： stackoverflow的问题

I managed to create circles using the technique explained here : stackoverflow question

现在，如何我在描述的状态之间的旋转动画。我不知道如何动画剪辑正确的属性。我也猜想它会表现得更好与一个clip-poly而不是一个三角形，但我不能动画。

Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.

推荐答案

CSS3微调框

DEMO < a>

此CSS预载器使用关键帧动画和 transform-rotate css3属性和填充颜色。

This CSS preloader uses keyframe animations and transform-rotate css3 properties to make the circle and the filling color.

此微调器具有响应性。

HTML： / p>

HTML :

<div class="sp sp1">
    <div class="sp sp2"></div>
</div>

.sp1{
    margin:50px auto;
    position:relative;
    width:30%;
    padding-bottom:30%;
    overflow:hidden;
    background-color:#557733;
    border-radius:50%;
    z-index:1;
}
.sp:before, .sp:after{
    content:'';
    position:absolute;
    height:100%;
    width:50%;
    background-color:#99FF33;
}
.sp1:after{
    width:80%;
    height:80%;
    margin:10%;
    border-radius:50%;
    background-color:#fff;
    z-index:6;
}
.sp1:before{
    background-color:inherit;
    z-index:5;
}

.sp2:before{
    z-index:4;
    -webkit-animation: spin1 3s linear infinite;
    animation: spin1 3s linear infinite;
    -webkit-transform-origin:100% 50%;
    transform-origin:100% 50%;
}
.sp2:after{
    opacity:0;
    right:0;
    z-index:6;
    -webkit-animation: spin2 3s linear infinite;
    animation: spin2 3s linear infinite;
    -webkit-transform-origin:0 50%;
    transform-origin:0 50%;
}


@-webkit-keyframes spin1 {
    0%   { -webkit-transform:rotate(0deg); }
    50%  { -webkit-transform:rotate(180deg); }
    100% { -webkit-transform:rotate(180deg); }
}
@keyframes spin1 {
    0%   { transform:rotate(0deg); }
    50%  { transform:rotate(180deg); }
    100% { transform:rotate(180deg); }
}
@-webkit-keyframes spin2 {
    0%   { -webkit-transform:rotate(0deg);opacity:0; }
    49.99%   { opacity:0; }
    50%  { -webkit-transform:rotate(0deg);opacity:1; }
    100% { -webkit-transform:rotate(180deg);opacity:1; }
}
@keyframes spin2 {
    0%   { transform:rotate(0deg);opacity:0; }
    49.99%   { opacity:0; }
    50%  { transform:rotate(0deg);opacity:1; }
    100% { transform:rotate(180deg);opacity:1; }
}

这篇关于CSS3微调器，预加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！