输入框效果（点击动效）

最新推荐文章于 2024-04-13 20:11:55 发布

原创最新推荐文章于 2024-04-13 20:11:55 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

12 篇文章

订阅专栏

当输入框获得焦点的时候，会出现动画效果，下面放代码

<div class="login-input">
					<input type="text" placeholder="邮箱" class="active-input">
					<span class="from-box-line"></span>
				</div>

css代码：（编写好看的样式）

.from-box-line{
	width: 0;
	height: 1px;
	background: #ff8005;
	position: absolute;
	bottom: -1px;
	left: 0;
	display: inline-block;
	z-index: 1;
	transition: width 1s;
	-moz-transition: width 1s;
	/* Firefox 4 */
	-webkit-transition: width 1s;
	/* Safari 和 Chrome */
	-o-transition: width 1s;
	/* Opera */
}
.active-input:focus~.from-box-line {
	width: 100%;
}

输入框的样式自己设计哦