CSSFX 简单漂亮的 CSS 动画特效库 - 文章教程

CSSFX 简单漂亮的 CSS 动画特效库

发布于 2020-03-04 字数 1629 浏览 1343 评论 0

精心设计的 CSS 动画特效库,注重流动性、简洁性和易用性。由 CSS 支持,代码量最少。完全开放源码项目。

CSSFX 简单漂亮的 CSS 动画特效库

安装运行

在本地运行,npm install 然后 npm run dev

CSSFX 简单漂亮的 CSS 动画特效库

使用方法

<div>
  <input type="text" placeholder="Input Underline">
  <span></span>
</div>
div {
  position: relative;
}

input {
  width: 6.5em;
  color: white;
  font-size: inherit;
  font-family: inherit;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom-color: hsla(341, 97%, 59%, 0.2);
}

input:focus {
  outline: none;
}

input::placeholder {
  color: hsla(0, 0%, 100%, 0.6);
}

span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 1px;
  opacity: 0;
  background-color: #fc2f70;
  transform-origin: center;
  transform: translate(-50%, 0) scaleX(0);
  transition: all 0.3s ease;
}

input:focus ~ span {
  transform: translate(-50%, 0) scaleX(1);
  opacity: 1;
}

官网:https://cssfx.netlify.com/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3