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

我的第一个想法是，最好使用 SVG 而不是 CSS border-radius 来追求特定的动画。 SVG 更灵活，因为您可以随意使用各种矢量元素，并且可以用 JavaScript 来表达动画。

示例动画有一些代数模式，如果不是不可能的话，也很难用 CSS 方法来处理。另请记住，使用 border-radius 时每个元素限制为 4 "corners"。

为了获得灵感，我建议浏览 Tympanus。您可能会在其中一个仅 CSS 的演示中看到您喜欢的内容： http://tympanus.net/Development/PseudoElementsAnimationsTransitions/index2.html http://tympanus.net/Development/ButtonStylesInspiration/

Answer 2

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

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/

CSS 边界-半径调制

CSS Border-Radius Modulation

html

css

animation

css-animations