CSSFX 简单漂亮的 CSS 动画特效库
精心设计的 CSS 动画特效库,注重流动性、简洁性和易用性。由 CSS 支持,代码量最少。完全开放源码项目。
安装运行
在本地运行,npm install
然后 npm run dev
。
使用方法
<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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论