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/

Answer 2

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

示例动画有一些代数模式，即使不是不可能，也很难用CSS方法。另请注意，使用border-radius时，每个元素限制为4个“角”。

对于一些灵感，我建议浏览鼓室。您可能会在其中一个仅限CSS的演示中看到您喜欢的内容： http://tympanus.net/Development/PseudoElementsAnimationsTransitions/index2.html http://tympanus.net/Development/ButtonStylesInspiration/

CSS边界半径调制

2 个答案: