用于果冻输入动画的css3技术

Question

在CSS3中做这样的事情背后的一般想法/技术是什么？会不可能？

（我正在谈论这条线，而不是标签，我知道该怎么做）

我发现它here

Answer 1

这不完全是你想要的。但看看：

＆＃13;

＆＃13;

body,
html {
  background: #111;
}
#ib {
  width: 300px;
  height: 50px;
  font-size: 40px;
  background: transparent;
  color: white;
  border: none;
  border-bottom: 2px solid #09f;
  outline: none;
}
#ib:focus {
  -webkit-animation: anim 0.3s cubic-bezier(0.080, 0.805, 0.930, 0.220);
}
@-webkit-keyframes anim {
  0% {
    border-radius: 0px;
  }
  50% {
    border-radius: 150px/10px;
  }
  100% {
    border-radius: 0px;
  }
}

＆＃13;

<input type="text" id="ib" placeholder="Type Something">

＆＃13;

＆＃13;

＆＃13;

Answer 2

我相信这可以使用SVG动画完成。 您可以使用名为SnapSVG的库。 看一下由Mary Lou创建的一些惊人流畅的SVG动画Elastic SVG Elements。