文章/答案/技术大牛

发布

社区首页 >问答首页 >jelly输入动画的css3技术

问jelly输入动画的css3技术
EN

Stack Overflow用户

提问于 2015-07-12 11:35:25

回答 2查看 1K关注 0票数 2

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

(我说的是产品线，而不是标签，我知道该怎么做)

我找到了here

css-animations

css

css-transitions

回答 2

Stack Overflow用户

发布于 2015-07-12 12:25:23

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

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">

票数 0

Stack Overflow用户

发布于 2017-04-21 23:24:01

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31364126

复制

相似问题

问jelly输入动画的css3技术
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jelly输入动画的css3技术EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jelly输入动画的css3技术
EN