html - CSS 边界半径调制

Question

我在网上广泛搜索，但找不到任何讨论。

有没有办法使用 css 动画来调整对象的边界半径？我正在寻找类似的东西(其中一个圆圈，而不是两个圆圈):

如果这可能的话，有没有人有一个大概的想法？我不是在寻找精确的复制，只是 border-radius 效果的简单实现。感谢您的任何想法。

这是我能得到的最接近的:

http://codepen.io/anon/pen/BNbNPg?editors=010

@-webkit-keyframes mymove {
  25%  {border-radius: 120px 100px 120px 110px;}
  50% {border-radius: 100px 120px 110px 120px;}
  75%  {border-radius: 120px 110px 120px 100px;}
  100% {border-radius: 110px 120px 100px 120px;}
}

Answer 1

我会尝试像您的代码笔那样做一些事情，但改为添加它。我添加了一个像 1000 度一样旋转的边框 哈哈

div {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border-color: red;
    border-style: solid;
    position :relative;
    -webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
}


@-webkit-keyframes mymove {
  25% { -webkit-transform: rotate(10000deg); }
  25%  {border-radius: 50px 100px 100px 100px;}
}

它正在到达那里...... https://jsfiddle.net/DIRTY_SMITH/avocyf33/9/也许有人可以对此进行补充，我想看看这项工作!

或者也许是某种起飞？ https://jsfiddle.net/DIRTY_SMITH/avocyf33/10/

虽然它没有回答你的问题，但错误地让它变得很酷

https://jsfiddle.net/DIRTY_SMITH/avocyf33/11/