CSS边界-半径调制

Question

我在网上搜索了很多，但找不到任何讨论。

有没有一种方法可以使用css动画来调整对象的边界半径？我在寻找某种类似的东西(要么是一个圆圈，而不是两个)：

​

​

如果可能的话，有没有人有一个大致的想法？我不是在寻找精确的复制，只是一个边界-半径效应的简单实现。谢谢你的建议。

这是我所能得到的最接近的：

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;}
}

快到了..。SMITH/avocyf33/9/也许有人可以添加到这个，我想看看这个工作！

或者可能是某种程度上的脱节？SMITH/avocyf33/10/

错误地做了这个很酷的事情，尽管它没有回答你的问题，

SMITH/avocyf33/11/

Answer 2

我的第一个想法是，最好是使用SVG而不是CSS边界半径来实现特定的动画。SVG更灵活，因为您有各种矢量元素可供您使用，并且您能够用JavaScript来表示动画。

示例动画有一些代数模式，如果不是不可能的话，也很难与CSS方法相结合。此外，请记住，当使用边框半径时，每个元素仅限于4个“角”。

为了获得一些灵感，我建议浏览Tympanus。您可能会在这些CSS专用演示中看到您喜欢的东西：http://tympanus.net/Development/PseudoElementsAnimationsTransitions/index2.html http://tympanus.net/Development/ButtonStylesInspiration/。