果冻输入动画的css3技巧

Question

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

（我说的是行，而不是标签，我知道该怎么做）

我发现它here

Answer 1

这不正是你想要的。但是看看：

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

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

Answer 2

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