CSS3动画旋转螺旋效果？答案

【问题标题】：CSS3 animation rotate spiral effect?CSS3动画旋转螺旋效果？
【发布时间】：2015-07-09 04:55:26
【问题描述】：

我已经搜索和试验了几天来产生这种效果，我想要一个中心点/块，然后从元素周围开始三个较小的块，然后这 3 个外部元素围绕中心进行动画旋转直到它们结束自己在中心（像螺旋效应，但在中心结束）。

我自己无法编写解决方案，我最接近的是https://jsfiddle.net/8ouf291w/

小提琴也不完全正确（3 个较小的块没有正确围绕中心块开始，也没有螺旋进入中心）。

小提琴代码如下-

HTML：

<div id="logowrap">
    <div>
        <div class="yellow"></div>
        <div class="blue"></div>
        <div class="orange"></div>
        <div class="green"></div>
    </div>
</div>

CSS：

#logowrap{
    text-align:center;
    margin-top:200px
}
#logowrap>div{
    display:inline-block;
    position:relative;
}
#logowrap>div div{
    position:absolute;
}

#logowrap .yellow, #logowrap .blue, #logowrap .orange{
    left:15px;
    top:17.5px;
    width:30px;
    height:35px;
}
#logowrap .green{
    width:60px;
    height:70px;
    background-color:green;
}
#logowrap .yellow{
    background-color:yellow;
    -webkit-animation: yellow 5s;
    -webkit-animation-iteration-count: 1;
}
#logowrap .orange{
    background-color:orange;
    -webkit-animation: orange 5s;
    -webkit-animation-iteration-count: 1;
}
#logowrap .blue{
    background-color:blue;
    -webkit-animation: blue 5s;
    -webkit-animation-iteration-count: 1;
}


@-webkit-keyframes yellow
{
    from {
        margin-left:-100px;margin-top:100px;
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        margin-left:0px;margin-top:0px;
        transform: rotate(360deg)
                   translate(-0px) 
                   rotate(-360deg);
    }
}
@-webkit-keyframes blue
{
    from {
        margin-top:-100px;
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        margin-left:0px;margin-top:0px;
        transform: rotate(360deg)
                   translate(-0px) 
                   rotate(-360deg);
    }
}
@-webkit-keyframes orange
{
    from {
        margin-left:100px;margin-top:100px;
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        margin-left:0px;margin-top:0px;
        transform: rotate(360deg)
                   translate(-0px) 
                   rotate(-360deg);
    }
}

【问题讨论】：

查看 codrops.com 上的存档演示相当确定我已经看过这个。

标签： html css animation css-animations css-transforms

【解决方案1】：

这是一种可能性

@-webkit-keyframes yellow
{
    from {
        transform: rotate(0deg)
                   translate(150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(0px) 
                   rotate(-360deg);
    }
}
@-webkit-keyframes blue
{
    from {
        transform: rotate(120deg)
                   translate(150px)
                   rotate(-120deg);
    }
    to {
        transform: rotate(480deg)
                   translate(0px) 
                   rotate(-480deg);
    }
}
@-webkit-keyframes orange
{
    from {
        transform: rotate(240deg)
                   translate(150px)
                   rotate(-240deg);
    }
    to {
        transform: rotate(600deg)
                   translate(0px) 
                   rotate(-600deg);
    }
}

fiddle

您走在正确的道路上，但只需要转换

【讨论】：