css - 跨弧的CSS动画

This question already has answers here:

CSS3 Translate across an Arc

(3个答案)


5年前关闭。




当前的CSS3是否可以沿此弧线为对象(DIV)设置动画？

最佳答案

我 fork 了(非常好)@ArunBertil“支点”解决方案，将其转换为CSS3 Animation:

Running Demo

的CSS

@keyframes drawArc1 {
    0%   { transform: rotate(180deg);  }
    100% { transform: rotate(0deg);    }
}

@keyframes drawArc2 {
    0%   { transform: rotate(-180deg); }
    100% { transform: rotate(0deg);    }
}

body{
    padding: 150px;
    background: black;
}

.wrapper {
    width: 300px;
    animation: drawArc1 3s linear infinite;
}

.inner {
    border-radius: 50%;
    display: inline-block;
    padding: 30px;
    background: yellowgreen;
    animation: drawArc2 3s linear infinite;
}

的HTML

<div class="wrapper">
    <div class="inner"></div>
</div>

在FireFox上观看...在其他浏览器上运行，只需添加前缀(@-webkit-keyframes等)

关于css - 跨弧的CSS动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18912476/